JavaScript框架篇——zepto

什么是zepto?

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto。

• Query更多是在PC端被应用，Zepto更多是在移动端被应用；也正是因为jQuery用在PC端,
• jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；也正是因为Zepto用在移动端,
• Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；综上所述:
• Zepto其实就是专门用于移动端的轻量级的jQuery

Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块
zepto选择器：
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能如类名和id选择器，如果想使用高级的选择器必须引入高级选择器模块。
zepto动画
1.使用zepto动画要导入相关的模块，其他动画的使用如jQuery中的动画类似。Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能。如果想使用动画必须引入动画模块
2.zepto动画注意点：由于zepto是一个轻量级的针对现代高级浏览器的 JavaScript库，不需要兼容低级浏览器, 所以zepto中的动画是通过CSS3属性来实现动画的，而jQuery中是通过DOM来实现动画的。二者的语法类似。

zepto的tap事件

1.无论PC端还是移动端都支持click事件，而且不仅仅是jQuery和Zepto支持, 原生的JS也支持

2.移动端click事件注意点：在企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听，因为移动端的事件很多(单击/双击/轻扫/捏合/拖拽等等)，所以如果通过click来监听,系统需要花费100~300毫秒判断到底是什么事件。而移动端对事件的响应速度要求很高, 事件响应越快用户体验就越好。所以如果需要在移动端监听点击事件, 那么请使用tap事件。

3.tap事件：tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题

touch事件

1.Zepto是如何实现tap事件的?虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的，在原生的JS中专门为移动端新增了几个事件：

• touchstart: 手指按下
• touchmove: 手指在元素上移动
• touchend : 手指抬起

2.注意点:这几个事件只支持移动端, 不支持PC端

	let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function () {
        console.log("手指按下");
    }
    oDiv.ontouchend = function () {
        console.log("手指抬起");
    }
    oDiv.ontouchmove = function () {
        console.log("手指移动");

touch事件对象

1.Touch事件对象
移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们

2.移动端touch事件对象中比较重要的三个子对象
touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指里列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

注意： 如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的；如果是将手指按到了不同的元素上,
那么这个两个对象中保存的内容不一样。touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指

手指的位置

1.screenX/screenY是相对于屏幕左上角的偏移位
2.clientX/clientY是相对于可视区域左上角的偏移位
3.pageX/pageY是相对于内容左上角的偏移位

let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function (event) {
        // console.log(event.targetTouches[0]);		//返回的是一个手指数组
        // console.log(event.targetTouches[0].screenX);
        // console.log(event.targetTouches[0].screenY);
        console.log(event.targetTouches[0].clientX); // 11
        console.log(event.targetTouches[0].clientY); // 63
        console.log(event.targetTouches[0].pageX);  // 686
        console.log(event.targetTouches[0].pageY);  // 63
    }

tap事件的实现原理
单击事件特点：
只有一根手指
按下和离开时间不能太久 100ms
按下和离开距离不能太远 5px

 		oDiv.ontouchstart = function (event) {
        // 1.判断当前元素中有几根手指
        if(event.targetTouches.length > 1){
            return;
        }
        // 2.拿到手指按下的位置
        startX = event.targetTouches[0].clientX;
        startY = event.targetTouches[0].clientY;
        // 3.拿到手指按下的时间
        startTime = Date.now();
    }
    oDiv.ontouchend = function (event) {
        // 1.判断有几根手指离开了
        if(event.changedTouches.length > 1){
            return;
        }
        // 2.拿到离开手指的位置
        let endX = event.changedTouches[0].clientX;
        let endY = event.changedTouches[0].clientY;
        // 3.判断手指离开的位置和按下位置的距离
        if(Math.abs(endX - startX) > 5 ||
            Math.abs(endY - startY) > 5){
            return;
        }
        // 4.拿到手指离开的时间
        let endTime = Date.now();
        // 5.判断手指离开的时间和按下的时间
        if(endTime - startTime > 100){
            return;
        }
        console.log("单击事件");
    }

移动的的点透问题
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件,而下面的元素监听click事件，并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。
移动端点透问题出现的原因：当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch事件先执行,执行完后从文档上消失，click事件有100~300ms延迟, 所以后执行，但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件。
移动端点透问题解决方案：在touch事件中添加event.preverDefault(); 阻止事件扩散。

oTap.ontouchstart = function (event) {
        this.style.display = "none";
        event.preventDefault(); //  阻止事件扩散
    }

解决方案
利用zepto的touch模块进行tap事件即可不产生点透。

zepto的轻扫事件（swipe）
什么是轻扫事件?
手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动

 $("div").swipeLeft(function () {
        // console.log("向左边轻扫");
        $(this).animate({marginLeft: "0"}, 2000);
    });
    $("div").swipeRight(function () {
        // console.log("向右边轻扫");
        $(this).animate({marginLeft: "100px"}, 2000);
    });
    $("div").swipeUp(function () {
        // console.log("向上边轻扫");
        $(this).animate({marginTop: "0"}, 2000);
    });
    $("div").swipeDown(function () {
        // console.log("向下边轻扫");
        $(this).animate({marginTop: "100px"}, 2000);
    });