Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api,在用法上和jQuery差不多,但它更多的用于移动前端开发,例如zepto的touch模块支持zepto.js封装的常用的触屏事件。
Zepto是分模块引入的,在zepto中文文档 https://www.html.cn/doc/zeptojs_api/ 中它有以下这些模块:
module | default | description |
---|---|---|
zepto | ✔ | 核心模块;包含许多方法 |
event | ✔ | 通过on() & off() 处理事件 |
ajax | ✔ | XMLHttpRequest 和 JSONP 实用功能 |
form | ✔ | 序列化 & 提交web表单 |
ie | ✔ | 增加支持桌面的Internet Explorer 10+和Windows Phone 8。 |
detect | 提供 $.os 和 $.browser 消息 | |
fx | The animate() 方法 | |
fx_methods | 以动画形式的 show , hide , toggle , 和 fade*() 方法. | |
assets | 实验性支持从DOM中移除image元素后清理iOS的内存。 | |
data | 一个全面的 data() 方法, 能够在内存中存储任意对象。 | |
deferred | 提供 $.Deferred promises API. 依赖"callbacks" 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。 | |
callbacks | 为"deferred"模块提供 $.Callbacks 。 | |
selector | 实验性的支持 jQuery CSS 表达式 实用功能,比如 $('div:first') 和el.is(':visible') 。 | |
touch | 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。 | |
gesture | 在触摸设备上触发 pinch 手势事件。 | |
stack | 提供 andSelf & end() 链式调用方法 | |
ios3 | String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x. |
可以看到Zepto默认构建只包含以下模块:Core, Ajax, Event, Form, IE。即当我们引入zepto.js文件时,只能调用这五个模块支持的用法。如果需要构建其他模块,就需要新引入所需模块的js文件,或是自定义构建,即将所需模块打包入zepto.js文件,也就是zepto定制。
zepto定制步骤
1. 安装Node.js环境:
http://nodejs.cn/download/ 下载node.js;
2. 下载zepto.js
https://github.com/madrobby/zepto 下载zepto.js,解压;
3. 在start menu(开始菜单)点击node.js command prompt,进入第2步解压后的目录,如在命令行输入:
4. 在当前目录的命令行执行npm install命令
5. 编辑zepto-master文件夹内的make文件,添加自定义模块:在target.build部分的modules行添加新增模块即可。如:
modules = (env['MODULES'] || 'zepto event ajax form ie fx selector').split(' ')
6. 然后执行命令 npm run-script dist
7. 查看目录dist即构建好的zepto.js