JS 流行库(三):Zepto
Zepto 框架是一个类似于 jQuery 的轻量级框架,抛弃了低级浏览器的适配问题,所以体积更小,如果会使用 jQuery,那么基本上也会使用 Zepto,jQuery 通常用于 PC 端,而 Zepto 通常用于移动端,所以说,Zepto 即为用于移动端的轻量级 jQuery
下载 Zetpo 库
基本使用
导入 Zepto 核心库
示例如下:
window.onload = function () {
console.log($("button").html()); // Click Me
}
Zepto 采用了模块化开发,即使用哪一种功能,导入哪一个模块,例如在 zepto 核心模块中无事件相关的代码,所以不能使用类似于 jQuery 添加事件的方式,必须导入 Zepto 的 event 模块:
示例如下:
window.onload = function () {
$("button").click(function () {
alert("Hello World"); // Hello World
})
}
若从 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 模块中自定义的事件,专门用于监听移动端的点击事件,导入模块:
示例如下:
$("div").tap(function () {
console.log("Tapped!"); // Tapped!
});
Zepto 中 tap 事件的底层使用了原生 JS 提供的移动端的 touch 事件:
事件
描述
touchstart
触碰
touchmove
移动
touchend
脱离
示例如下:
let oDiv = document.querySelector("div");
oDiv.ontouchstart = function () {
console.log("Start"); // Start
}
oDiv.ontouchmove = function () {
console.log("Move ...");