JS 流行库(三):Zepto

JS 流行库(三):Zepto

JS 流行库(三):Zepto

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

下载 Zetpo 库

基本使用

导入 Zepto 核心库

示例如下:

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

示例如下:

若从 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 模块中自定义的事件,专门用于监听移动端的点击事件,导入模块:

示例如下:

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

事件

描述

touchstart

触碰

touchmove

移动

touchend

脱离

示例如下: