11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着相似的api。 若是你会用jquery，那么你也会用zepto。

1. Why Zepto.js？

1. API相似jQuery，熟悉jQuery能够无缝迁移到Zepto.js
2. Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤为适合移动端开发。
3. Zepto增长了针对移动端的触摸和手势相关的事件
4. Zepto模块化作的很灵活，能够自定义组合模块

2. Zepto.js下载

代码下载：zeptojs中文站 、 github

2.1 自定义Zepto.js文件模块

zepto默认是有五个模块的，分别为zepto、event、ajax、form、ie，这五个模块被称为核心模块。

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		提供 $.Deferredpromises 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.

若是须要其余非核心模块，须要下载github的源码自行编译。

自定义编译步骤：

1. 第一步：下载zeptojs源码：源码
2. 第二步：解压源码，并打开命令行进入源码根目录

# 打开命令行工具，进入解压的zepto目录 $ cd zepto-master # 安装npm包依赖 $ npm install 

1. 第三步：修改make编译文件的依赖模块

modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
## 修改：增长 touch gesture fx fx_methods等模块 ## modules = (env['MODULES'] || 'zepto event ajax form ie touch gesture fx fx_methods').split(' ') 

 

1. 第四步：编译最终的zeptojs

$ npm run-script dist 

3. zepto注意事项

1. 注意某些模块必须打包进zeptojs文件才能用，好比：fx_methods模块的方法：hide() show()等动画方法。
2. Zepto只设置全局变量$指向它自己。 没有Zepto.noConflict方法。
3. 不支持jQuery CSS 扩展， 然而，可选的“selector”模块有限提供了支持几个最经常使用的伪选择器
4. Zepto.js: 没法获取隐藏元素宽高；
5. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
6. 移动端端点透须要阻止默认行为来规避。

其实还有不少方法的缺失，因此你们本身在写代码的时候多留意下zepto和jQuery的区别吧，在此就很少赘述了。

4. zepto的应用demo

用法基本跟jQuery一致，直接上手就行，不用客气。

<ul> <li>list item 1</li> <li class="yaotaiyang">list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p> <script type="text/javascript"> $(function() { $("p").on('click', function(e) { $("li").toggleClass("yaotaiyang"); }); }); </script> 

5. 总结

zepto.js确实很是小巧，并且很是讨巧的利用了你们熟悉jQuery的优点，确实很是可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。