01-Zepto
2019-10-07 本文已影响0人
七分之二十四
初识Zepto
- Zepto是一个轻量级的针对现代高级浏览器的Javascript库,与jQuery有着类似的api
- jQuery更多是在PC端被应用,Zepto更多是在移动端被应用
- jQuery用在PC端,所以jQuery考虑了很多低级浏览器的兼容性问题,所以代码更多体积更大
- Zepto用在移动端,所以Zepto则是直接抛弃了低级浏览器的适配问题,所以代码更少体积更小
- Zepto其实就是专门用于移动端的轻量级的jQuery
- Zepto特点
- Zepto采用了模块化的开发,将不同的功能放到了不同的模块中
- 在使用过程中我们可以按需导入,也就是需要什么功能就导入什么模块
- Zepto注意点
- 如果是从官方网站下载的,那么已经包含了默认的一些模块
- 如果是从github下载的,那么需要我们自己手动导入每一个模块
- 后续学了NodeJS后,我们也可以自己控制
- Zepto动画
- 需要导入fx.js和fx_methods.js文件
- 与jQuery的区别是:Zepto是通过C3来实现的,jQuery是通过修改DOM的值来实现的
Tap事件
- 无论是PC端还是移动端都支持click事件,而且不仅仅是jQuery和Zepto支持,原生的JS也支持
- 移动端click事件注意点
- 在企业开发中如果需要在移动端监听点击事件,一般不会使用click来监听
- 因为移动端的事件很多(单机/双击/轻扫/捏合/拖拽等等)
- 通过click来监听,系统需要花费100~300毫秒判断到底是什么事件
- 移动端对事件的响应速度要求很高,事件响应越快用户体验就越好
- 所以如果需要在移动端监听点击事件,那么使用tap事件
- Tap事件是Zepto自己封装的一个事件,解决了原生click事件100~300毫秒的延迟问题
移动端Touch事件
- 虽然tap事件是Zepto自己封装的事件,但是无论如何封装肯定都是通过原生JS来实现的
- 在原生的JS中专门为移动端新增了几个事件
- touchstart:手指按下
- touchmove:手指在元素上移动
- touchend:手指抬起
- 注意点:这几个事件只支持移动端,不支持PC端
Touch事件对象
- 移动端的touch事件也是一个事件,所以被触发的时候系统也会自动传递一个事件对象给我们
- 移动端touch事件对象中比较重要的三个子对象
- touches: 当前屏幕上所有手指的列表
- targetTouches: 保存了元素上所有的手指列表
- changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指
- Touch事件位置
- screenX/screenY是相对于屏幕左上角的偏移位
- clientX/clientY是相对于可视区域左上角的偏移位
- pageX/pageY是相对于内容左上角的偏移位
移动端点透问题
- 当一个元素覆盖了另一个元素,覆盖的元素监听touch事件,而下面的元素监听click事件,并且touch事件触发后覆盖的元素就消失了,那么就会出现点透问题
- 移动端点透问题三种解决方案
- 在touch事件中添加event.preventDefault();阻止事件扩散
- 使用Zepto,但是需要注意老版本的Zepto也会出现点透问题
- 使用Fastclick,最早解决点透问题的插件
swipe事件
- 轻扫事件:手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动
