与前端训练营的日子 -- Week15

学习组件化设计的第二周，这周的代码量不少，跟着老师的步伐一步步，搭建轮播组的控制逻辑部分，涉及动画处理还有手势识别以及事件响应。又是愉快的一周，临近春节，除了休息和节日活动，学习也不能停下来，加油吧！

JavaScript 处理帧的方案

1. setInterval(() => {}, 16)，16ms 代表 60 帧，但比较不可控

2. setTimeout(() => {}, 16)，16ms 代表 60 帧，这是相对安全的做法

3. requestAnimationFrame(callback)，在浏览器执行动画下一帧之前，执行回调函数，它的帧率与浏览器相关。现代浏览器更推荐采用requestAnimationFrame(callback)方案

事件的捕获与冒泡

• 捕获

• 将设备(鼠标或触摸屏)的点击坐标转换为具体的元素上的事件的过程，称为捕获过程。

• 事件流是从根节点传递到具体元素的，这就是所谓的从外向内。

• 冒泡

• 元素的事件优先响应，然后事件往根节点上传递，就像泡泡那样从下往上冒，称为冒泡。

• 事件流是从具体元素传递到根节点的，这就是所谓的从内到外。

参考UI Evenet的图片https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg，会有更清晰的理解

手势识别

• tap手势(点击)，点一下就松开

• pan手势(拖拽)，点击并移动一定距离(本例采用 10px 距离)后，可以不停移动直到松开点击。

• press手势(按压)，点击并持续保持点击一段时间(本例采用 0.5s)

• flick手势(快速滑动)，在pan手势结束状态下，如果速度到达设定值就会识别为flick手势

本周学习内容

• 手势与动画

• 设计时间线

• 手势识别

参考资料

浏览器事件：为什么会有捕获过程和冒泡过程？

UI Evenet