个人接触移动端的经验还是比较欠缺的，结合网上一些博文作了这方面的总结。

300ms 点击延迟

  先说这大概是一种什么现象：我们先将点击动作分为两类，一种是单击，另一种则是双击；由于苹果厂的历史原因，移动端的浏览器需要300ms的响应延迟来判断用户动作是属于单击还是双击。由于苹果那个时候还是老大哥(虽然现在也还勉强)，它有着双击缩放和滚动的特性，所以我们经常看到以下的这种HTML的头部媒体标签设置:

1
2

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

 今天做到的一道题，还是蛮有意思的，巩固了一下函数声明这一块的知识点，其中包含了函数表达式、声明提升以及优先级问题。

 在移动端H5开发的时候，曾经遇到过一个点击选中单选框的问题，这里的点击不仅仅是点击单选框可以选中，如果要求点击其后的文案也能同时选中单选框要如何做呢？

  其实这个场景挺常见的，不过之前我自己没有实践过，核心就是如下代码(关键点在于input的id和label的for对应)：

1
2

<input type="radio" id="bbb"/>
<label for="bbb">...</label>

 《CSS世界》这本书感觉可以说是张鑫旭的一本CSS领域的内功心法，阅读这本书其实是为了印证一些自身在CSS学习上的一些东西，所以有了这篇读书笔记，记录一些我不是很清晰的知识点。

  1、伪类选择器：一般指前面有个英文冒号(:)的选择器，如first-child或:last-child等。
  2、伪元素选择器：就是有连续两个冒号的选择器，如::first-line、::first-letter、::before、::after等。P.S：单、双冒号都是现在的规范，为了区分伪类和伪元素。IE8仅支持单冒号的伪元素。
  3、后代选择器：选择所有合乎规则的后代元素。用空格连接。
  4、相邻后代选择器：仅选择儿子(一层后代)元素，用>连接。
  5、>、~、+选择器适用于IE7以上版本。

 适配移动端的核心是什么？我觉得核心就是如何把设计师给出的UI同等比例地布局在不同大小的移动端屏幕上。

怎么做？

  常见的有两种方案，第一种是通过CSS3的Media Query来指定大中小屏幕区间设置不同的样式，第二种则是使用rem根据屏幕比例动态计算大小。

 ICE和层叠问题其实都是老问题了，本文只是挪一下之前的share。

什么是ICE?

  ICE其实就是id、class、element的缩写，它们分别表征了不同的样式优先级，如果以权值来衡量，那么它们分别对应的权将是I:100，C:10，E：1，伪类，eg. :link 属C，伪元素，eg. :first-child 属E。除此之外继承-extends的权为0.1，!important的权最高（我们在样式表中看到该设置，往往意味着开发者不想该样式将来被别的内联或者其他附加的样式属性所覆盖或重写）。

  我们通过计算ICE权值，样式以最高者优先。

 图片轮播可以说是各大门户页面对CSS技术应用泛度最高的技术了，同时也是面试中对样式侧考核常见的题目，因为它综合了WEB的三大基本结构：HTML、JS、CSS。

简易的轮播实现

  一般来讲，完整的轮播实现都会包括一个脚标处的对应图片数量的按钮切换以及左右侧的对应切换到前一张和后一张图的按钮。现在我们先不考虑这些功能，将焦点集中在图片的轮播切换上，实现一个简易的轮播功能。

  怎么做？

页面布局

  通过CHROME的控制台查看ELEMENTS我们可以很清楚地看到常见的轮播DOM构造都是以ul标签嵌套li标签实现的。在li标签内通过CSS的background属性指定url填充图片。

 垂直居中这个问题我觉得是面试里面对CSS考核的最常见的一个问题，并且在实际场景中也应用广泛，有必要拿出来说一说。

使用margin的auto属性

  这种方式有很多变种，但有一点值得我们留意：我们使用margin的auto属性时需要有指定的宽度和高度声明。因为说到底，auto属性还是会根据剩余空间来分配，如果没有给当前盒子指定高宽，那就无法进行计算。

  下面我们的html页面统一body内容如下：

1
2
3
4

<div class="container">
    <div class="main">
    </div>
</div>

 不知道从什么时候起，时间开始像飞驰而过的地铁，似乎仅是一个瞬间，却又仿佛走过了数个春秋。

生活

  2018年就这么过去了，这一年着实发生了很多事情，最重要的一件事当然是我毕业了，完成了从逗比大学僧到逗比社畜的华丽转型。从此经济独立，走向了自给自足的“富裕”生活。犹记得17年7月刚从华为实习完出来，和（大部分）大学生一样参加了秋招…的尾巴，然后边准备着毕业论文边边在公司实习，最后毕业时，也没有换地，过来转了正。说来我和我司还是颇有些缘分的，具体就不怎么描述了，嘿。

  除此之外，也是顺利把挂了一次的科三给撸过去了，拿到了驾照，成为了一名光荣的马路杀手，不过在SZ的上下班时间点，我还是没什么开车的想法。

  哦，还认识了很多有意思的人，讨论了下人参哲理。期间又跟初、高中、大学的老友聚了几次，发现大家还是一样的优秀！毕竟物以类聚，人以群分，没什么毛病。

  总的来说，这一年过得很饱满，无论是物质上还是精神上。

 本文并不全是按照React官方文档中关于Hooks提案部分的翻译，最终由本人总结整理顺序思考总结所得。

什么是Hooks?

  在官方文档中，是这么描述hooks的：hooks是一个新的功能提案，它允许你在class外使用state和其他的React特性。hooks是许多方法的集合，它们使你能够在函数组件内使用React的状态(state)和生命周期(life cycle)特性。你可以在Reactv16.7.0-alpha版本里面使用它（不过在实际发布的Reactv16.7.0版本中并没有实装该特性）。

为什么要使用Hooks?

  1、React本身是没有提供给我们逻辑复用的方式的，我们开发中多是借助redux的connect方法，将全局Store中对应类型的state绑到我们当前组件的props中。那么hooks能够做到什么呢？它不仅可以将含有state的逻辑从组件中抽象出来，而且不必重构先前的代码（渐进式），同时这些抽象出来的逻辑能够跨组件复用。

  2、Hooks允许我们根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。我们还可以选择使用一个reducer来管理组件的本地状态，使其预测性更强。

  3、class本身就是一块语法糖，其中涉及的this上下文绑定会带来初学者的一些学习成本，除此之外，它目前并不能很好的被minify，同时会造成很多不必要的组件更新。虽然这一问题还未得到根本解决，但是hooks的出现提供了额外的操作空间，它使我们能够在class之外使用更多React的特性。