Zepto.js是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代瀏覽器的JavaScript庫(kù)痢法， 它與jquery有著類(lèi)似的api萨脑。 如果你會(huì)用jquery究西，那么你也會(huì)用zepto锄列。
1. Why Zepto.js图云？
- API類(lèi)似jQuery，熟悉jQuery可以無(wú)縫遷移到Zepto.js
- Zepto僅針對(duì)高版本現(xiàn)代瀏覽器設(shè)計(jì)了最小核心的通用庫(kù)邻邮，代碼體積小竣况，尤其適合移動(dòng)端開(kāi)發(fā)。
- Zepto增加了針對(duì)移動(dòng)端的觸摸和手勢(shì)相關(guān)的事件
- Zepto模塊化做的很靈活筒严，可以自定義組合模塊
2. Zepto.js下載
代碼下載：zeptojs中文站 丹泉、 github
2.1 自定義Zepto.js文件模塊
zepto默認(rèn)是有五個(gè)模塊的，分別為zepto鸭蛙、event摹恨、ajax、form娶视、ie晒哄，這五個(gè)模塊被稱為核心模塊。
| module | default | description |
|---|---|---|
| zepto | ? | 核心模塊肪获；包含許多方法 |
| event | ? | 通過(guò)on()& off()處理事件 |
| ajax | ? | XMLHttpRequest 和 JSONP 實(shí)用功能 |
| form | ? | 序列化 & 提交web表單 |
| ie | ? | 增加支持桌面的Internet Explorer 10+和Windows Phone 8寝凌。 |
| detect | 提供 $.os和 $.browser消息 |
|
| fx | The animate()方法 |
|
| fx_methods | 以動(dòng)畫(huà)形式的 show, hide, toggle, 和 fade*()方法. |
|
| assets | 實(shí)驗(yàn)性支持從DOM中移除image元素后清理iOS的內(nèi)存。 | |
| data | 一個(gè)全面的 data()方法, 能夠在內(nèi)存中存儲(chǔ)任意對(duì)象孝赫。 |
|
| deferred | 提供 $.Deferredpromises API. 依賴"callbacks" 模塊. 當(dāng)包含這個(gè)模塊時(shí)候, $.ajax() 支持promise接口鏈?zhǔn)降幕卣{(diào)较木。 |
|
| callbacks | 為"deferred"模塊提供 $.Callbacks。 |
|
| selector | 實(shí)驗(yàn)性的支持 jQuery CSS 表達(dá)式 實(shí)用功能青柄，比如 $('div:first')和el.is(':visible')伐债。 |
|
| touch | 在觸摸設(shè)備上觸發(fā)tap– 和 swipe– 相關(guān)事件。這適用于所有的touch(iOS, Android)和pointer事件(Windows Phone)致开。 |
|
| gesture | 在觸摸設(shè)備上觸發(fā) pinch 手勢(shì)事件峰锁。 | |
| stack | 提供 andSelf& end()鏈?zhǔn)秸{(diào)用方法 |
|
| ios3 | String.prototype.trim 和 Array.prototype.reduce 方法 (如果他們不存在) ，以兼容 iOS 3.x. |
如果需要其他非核心模塊喇喉，需要下載github的源碼自行編譯祖今。
自定義編譯步驟：
- 第一步：下載zeptojs源碼：源碼
- 第二步：解壓源碼，并打開(kāi)命令行進(jìn)入源碼根目錄
# 打開(kāi)命令行工具拣技，進(jìn)入解壓的zepto目錄
$ cd zepto-master
# 安裝npm包依賴
$ npm install
- 第三步：修改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(' ')
- 第四步：編譯最終的zeptojs
$ npm run-script dist
3. zepto注意事項(xiàng)
- 注意某些模塊必須打包進(jìn)zeptojs文件才能用千诬，比如：
fx_methods模塊的方法：hide() show()等動(dòng)畫(huà)方法。 - Zepto只設(shè)置全局變量$指向它本身膏斤。 沒(méi)有Zepto.noConflict方法徐绑。
- 不支持jQuery CSS 擴(kuò)展， 然而莫辨，可選的“selector”模塊有限提供了支持幾個(gè)最常用的偽選擇器
- Zepto.js: 無(wú)法獲取隱藏元素寬高傲茄；
- Zepto 的選擇器表達(dá)式: [name=value] 中value 必須用 雙引號(hào) " or 單引號(hào) ' 括起來(lái)
- 移動(dòng)端端點(diǎn)透需要阻止默認(rèn)行為來(lái)規(guī)避毅访。
其實(shí)還有很多方法的缺失，所以大家自己在寫(xiě)代碼的時(shí)候多留意下zepto和jQuery的區(qū)別吧盘榨，在此就不多贅述了喻粹。
4. zepto的應(yīng)用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. 總結(jié)
zepto.js確實(shí)非常小巧，而且非常討巧的利用了大家熟悉jQuery的優(yōu)勢(shì)山憨，確實(shí)非巢槠梗可愛(ài)的一個(gè)js庫(kù)，設(shè)計(jì)的模塊中庸而又實(shí)用郁竟，在移動(dòng)端的觸屏事件封裝的很不錯(cuò)玛迄，移動(dòng)端web開(kāi)發(fā)值得推薦。
