JS 流行库（三）：Zepto

Zepto 框架是一个类似于 jQuery 的轻量级框架，抛弃了低级浏览器的适配问题，所以体积更小，如果会使用 jQuery，那么基本上也会使用 Zepto，jQuery 通常用于 PC 端，而 Zepto 通常用于移动端，所以说，Zepto 即为用于移动端的轻量级 jQuery

下载 Zetpo 库

基本使用

导入 Zepto 核心库

<script src="./zepto.js"></script>

示例如下：

<button>Click Me</button>
<script>window.onload = function () {console.log($("button").html());    // Click Me}
</script>

Zepto 采用了模块化开发，即使用哪一种功能，导入哪一个模块，例如在 zepto 核心模块中无事件相关的代码，所以不能使用类似于 jQuery 添加事件的方式，必须导入 Zepto 的 event 模块：

<script src="./event.js"></script>

示例如下：

<button>Click Me</button>
<script>window.onload = function () {$("button").click(function () {alert("Hello World");   // Hello World})}
</script>

若从 Zepto 官网下载的 Zepto 库，默认包含一些模块，若从 GibHub 下载，那么必须手动导入必须的模块

由于 Zepto 的使用方法与 jQuery 极为相似，所以次数不再详细说明，必须注意的是，如果想要使用高级特性，那么必须导入相应的模块，以下是常用模块的描述：

模块	描述
zepto	核心模块
event	通过 on() & off() 处理事件
ajax	XMLHttpRequest 和 JSONP 实用功能
fx	The animate() 方法
fx_methods	以动画形式的 show，hide，toggle 和 fade*() 方法
selector	jQuery CSS 表达式实用功能
touch	在触摸设备上触发 tap– 和 swipe– 相关事件
gesture	在触摸设备上触发 pinch 手势事件

由于 Zepto 通常应用在移动端，所以之后介绍移动端相关的特性（touch 模块）

touch

原生 JS、jQuery 以及 Zepto 不论在 PC 端还是移动端均支持 click 点击事件，但移动端通常并不使用 click 事件，由于移动端的点击存在若干情况（轻扫、拖拽等），若使用 click 事件监听将影响性能，存在 100ms ~ 300ms 的延迟，所以，如果在移动端监听点击事件，建议使用 tap

tap

tap 是 Zepto 在 touch 模块中自定义的事件，专门用于监听移动端的点击事件，导入模块：

<script src="./zepto.js"></script>
<script src="./event.js"></script>
<script src="./touch.js"></script>

示例如下：

<div></div>
<script>$("div").tap(function () {console.log("Tapped!"); // Tapped!});
</script>

Zepto 中 tap 事件的底层使用了原生 JS 提供的移动端的 touch 事件：

事件	描述
touchstart	触碰
touchmove	移动
touchend	脱离

示例如下：

<div></div>
<script>let oDiv = document.querySelector("div");oDiv.ontouchstart = function () {console.log("Start");       // Start}oDiv.ontouchmove = function () {console.log("Move ...");    // Move ...}oDiv.ontouchend = function () {console.log("End");         // End}
</script>

原生 JS 的 touch 事件对象中有如下属性：

属性	描述
touches	以列表的形式保存屏幕上的所有手指
targetTouches	以列表的形式保存屏幕上某一个 DOM 元素上的所有手指
changedTouches	以列表的形式保存屏幕上瞬间触碰或脱离的手指

示例如下：

<div></div>
<script>let oDiv = document.querySelector("div");oDiv.ontouchstart = function (event) {console.log(event.touches);console.log(event.targetTouches);console.log(event.changedTouches);}
</script>

通常情况下使用 targetTouches

每一个 Touch 实例都有位置相关的属性：

属性	描述
screenX/screenY	触碰点到屏幕左上角的水平和垂直偏移位
clientX/clientY	触碰点到可视区域左上角的水平和垂直偏移位
pageX/pageY	触碰点到网页左上角的水平和垂直偏移位

示例如下：

<div></div>
<script>let oDiv = document.querySelector("div");oDiv.ontouchstart = function (event) {let obj = event.targetTouches[0];console.log("screenX", obj.screenX);console.log("screenY", obj.screenY);console.log("clientX", obj.clientX);console.log("clientY", obj.clientY);console.log("pageX", obj.pageX);console.log("pageY", obj.pageY);}
</script>

以下示例是 Zepto 中 tap 的实现原理：

(function (window) {function myTap(elem, fn) {if (!(elem instanceof HTMLElement)) {return;}let startX = 0, startY = 0, startStamp = 0;elem.ontouchstart = function (event) {if (event.targetTouches.length > 1) {return;}startX = event.targetTouches[0].clientX;startY = event.targetTouches[0].clientY;startStamp = Date.now();};elem.ontouchend = function (event) {if (event.changedTouches.length > 1) {return;}let stopX = event.changedTouches[0].clientX;let stopY = event.changedTouches[0].clientY;if (Math.abs(stopX - startX) > 5 || Math.abs(stopY - startY) > 5) {return;}let stopStamp = Date.now();if (stopStamp - startStamp > 100) {return;}fn && fn();};}window.myTap = myTap;
})(window);

当使用原生 JS 的 toush 相关事件时，在移动端存在点透问题，示例如下：

<style>* {margin: 0;padding: 0;}.outter {width: 300px;height: 300px;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.inner {width: 200px;height: 200px;background-color: blue;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>
<div class="outter"></div>
<div class="inner"></div>
<script>window.onload = function () {let oOutter = document.querySelector(".outter");oOutter.onclick = function () {console.log("Hello World"); // Hello World}let oInner = document.querySelector(".inner");oInner.ontouchstart = function () {oInner.style.display = "none";  // disappear}}
</script>

在上述示例中，当触碰 inner 之后，inner 消失，且 outter 将触发 click 事件，原因在于在移动端触碰屏幕时，将同时产生 touch 和 click 事件，由于 click 事件存在 100ms ~ 300ms 的延迟，因此 touch 事件先于 click 事件触发，当 inner 消失后，click 事件触发，此时已无 inner，所以将触发 outter 的 click 事件，解决方案如下：

window.onload = function () {let oOutter = document.querySelector(".outter");oOutter.onclick = function () {console.log("Hello World"); // nothing}let oInner = document.querySelector(".inner");oInner.ontouchstart = function (event) {oInner.style.display = "none";  // disappearevent.preventDefault();}
}

在上述示例中，调用 touch 事件对象的 preventDefault 方法，关闭事件冒泡，此外最新版本的 Zepto 的 tap 事件默认解决了点透问题，示例如下：

<script src="./zepto.js"></script>
<script src="./event.js"></script>
<script src="./touch.js"></script>
<script>window.onload = function () {let oOutter = document.querySelector(".outter");oOutter.onclick = function () {console.log("Hello World"); // nothing}let oInner = document.querySelector(".inner");$(oInner).tap(function () {oInner.style.display = "none";  // disappear});}
</script>

在上述示例中，若使用的是老版本的 Zepto，那么仍将存在点透问题，此时，可以使用 Fastclick 库来解决点透问题，示例如下：

<script src="./fastclick.js"></script>
<script>window.onload = function () {if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function () {FastClick.attach(document.body);}, false);}let oOutter = document.querySelector(".outter");oOutter.onclick = function () {console.log("Hello World"); // nothing}let oInner = document.querySelector(".inner");oInner.addEventListener("click", function () {oInner.style.display = "none";  // disappear})}
</script>

在上述示例中，看似使用原生 JS 为 oInner 添加了 click 事件，但此 click 事件是已经被 fastclick 库升级之后的 click 事件，同时解决了 300ms 的延迟问题以及点透问题

swipe

在 Zepto 的 touch 模块中，除了 tap 事件之外，还有一个 swipe 事件，专门用于监听移动端手指在屏幕上的轻扫，示例如下：

<script src="./zepto.js"></script>
<script src="./event.js"></script>
<script src="./touch.js"></script>
<div></div>
<script>$("div").swipe(function () {console.log("Swiped!"); // Swiped! ...})
</script>

在上述示例中，监听了 div 的 swipe 事件，不过无法得知轻扫的方法，所以可以监听 swipeLeft、swipeRight、swipeUp、swipeDown 事件，示例如下：

<style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;background-color: red;margin-left: 100px;margin-top: 100px;}
</style>
<script src="./zepto.js"></script>
<script src="./event.js"></script>
<script src="./touch.js"></script>
<script src="./fx.js"></script>
<div></div>
<script>$("div").swipeLeft(function () {$(this).animate({marginLeft: "0"}, 1000);})$("div").swipeRight(function () {$(this).animate({marginLeft: "100px"}, 1000)})$("div").swipeUp(function () {$(this).animate({marginTop: "0"}, 1000);})$("div").swipeDown(function () {$(this).animate({marginTop: "100px"}, 1000);})
</script>

高级使用

插件

和 jQuery 相同，Zepto 也可以自定义插件，格式如下：

;(function($){$.extend($.fn, {stop: function(){// ...}})
})(Zepto)