JS 流行库（三）：Zepto

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 ...");