從哪里下載 Zepto
這個(gè)問題看起來很蠢引润，從官網(wǎng)下載不就行了嘛！可是你有沒有發(fā)現(xiàn)下載鏈接上面有行小字呢两嘴？
There are more modules; a list of all modules is available in the README.
在這個(gè)README里面你會驚奇地發(fā)現(xiàn)，Zepto 源碼中有 14 個(gè)模塊，而官網(wǎng)提供的標(biāo)準(zhǔn)版里面只有 7 個(gè)模塊嗽冒！而且居然不包含對移動端開發(fā)非常重要的 touch 模塊（提供對觸摸事件的支持）！
所以我的建議是补履，不要從官網(wǎng)下載添坊，而是從 Github 下載了源代碼之后自己 Build 一個(gè)版本，這樣你可以自行挑選適合的模塊箫锤。比如我挑選的模塊是這么幾個(gè)：
polyfill贬蛙，zepto雨女，detect，event阳准，ajax氛堕，form，fx這7個(gè)就是標(biāo)準(zhǔn)版包含的模塊
fx_methods有了這個(gè)模塊之后野蝇，.show() .hide() 等幾個(gè)方法才能支持動畫了讼稚，比如.show('fast')
data提供對 .data() 方法的完整支持，像 jQuery 一樣用內(nèi)存對象存儲
assets移除 img 元素后做一些特殊處理绕沈，用來清理內(nèi)存
selector更多的選擇器的支持锐想，后面會提到
touch對觸摸事件的支持，比如 tap 事件
如果你對 Node 不了解不知道如何 Build 的話七冲，可以下載我的版本
不要用 click 事件痛倚，用 tap 代替
這個(gè)估計(jì)已經(jīng)廣為人知了，因?yàn)?click 事件有 200~300 ms 的延遲澜躺，為了更快的響應(yīng)蝉稳，最好用 Zepto 提供的 tap 事件
不相信的話，可以用以下代碼測試一下
vart1,t2;$('#id').tap(function() {? ? t1 = Date.now();});$('#id').click(function() {? ? t2 = Date.now();? ? alert(t2 - t1);});
Zepto 對 CSS 選擇器的支持
鄭重提醒掘鄙，:text :checkbox :first等等在 jQuery 里面很常用的選擇器耘戚，Zepto 不支持！
原因很簡單操漠，jQuery 通過自己編寫的 sizzle 引擎來支持 CSS 選擇器收津，而 Zepto 是直接通過瀏覽器提供的document.querySelectorAll接口。
這個(gè)接口只支持標(biāo)準(zhǔn)的 CSS 選擇器浊伙，而上面提到的那些屬于jQuery 選擇器擴(kuò)展撞秋，所以仔細(xì)看看這個(gè)網(wǎng)頁，注意一下這些選擇器嚣鄙。
當(dāng)然也有好消息吻贿，就是上面提到的 selector 模塊，如果有這個(gè)模塊的話哑子，能夠支持部分的 jQuery 選擇器擴(kuò)展舅列，列舉如下：
:visible :hidden
:selected :checked
:parent
:first :last :eq
:contains :has
元素的尺寸計(jì)算
首先 Zepto 沒有 .innerHeight() .outerWidth() 等四個(gè)方法，其次卧蜓，它的 .height()/.width() 方法也不完善帐要，對于display:none的元素，計(jì)算出的高寬都是 0
而這在 jQuery 里面是沒有問題的弥奸，因?yàn)?jQuery 針對這種元素榨惠，會先設(shè)置其 css 樣式設(shè)置為position: "absolute", visibility: "hidden", display: "block"
計(jì)算完高寬后再恢復(fù)，參見https://github.com/jquery/jquery/blob/master/src/css.js#L460
如果遇到這種特殊情況，可以參考 jQuery 寫一個(gè)類似的方法
.prop() 方法的陷阱
有次我要把一個(gè)文本框置為只讀赠橙，寫了這么一行$('#text').prop('readonly', true)結(jié)果死活不工作
找了半天才發(fā)現(xiàn)伸蚯，正確的寫法是這樣$('#text').prop('readOnly', true)，如果你居然看不出兩者的差別简烤，那么悄悄提示你：注意大小寫剂邮！
翻了一下相關(guān)的文檔，原來只讀屬性的正確拼法確實(shí)是 readOnly横侦，可是在 jQuery 里面上一段代碼卻能正常工作
于是到 jQuery 源碼里面一找才發(fā)現(xiàn)挥萌，還有這么一段https://github.com/jquery/jquery/blob/master/src/attributes.js#L466
jQuery.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function() {? ? jQuery.propFix[this.toLowerCase() ] =this;});
從這里也能看到，jQuery 的成熟度真是難以超越枉侧，因?yàn)樗盐覀兌紤T壞了……
考慮到這段代碼比較簡單引瀑，我厚顏無恥地抄襲了一下然后給 Zepto 提了一個(gè)pull request，如果你們喜歡這種無腦的用法榨馁，可以去評論表達(dá)支持（記得用英文）
.show() 的動畫效果
如果沒有 fx_mehods 模塊的話憨栽，.show() 方法是不支持動畫的，不過有了這模塊后翼虫，動畫的支持還是有點(diǎn)小問題屑柔，比如這么一段 HTML
test
如果你調(diào)用$('div').show('fast')，那么動畫完成后你看到的不會是一個(gè)半透明的元素珍剑，而是全黑不透明的
因?yàn)?Zepto 的 .show() 動畫實(shí)現(xiàn)的很簡單掸宛，沒有高寬的變化，而是將透明度從 0 逐漸變?yōu)?1招拙，所以元素上原來設(shè)置的透明度就被替代了唧瘾。
這種情況下，可以用 .fadeIn() 方法來替代 .show()
結(jié)語
看到這里相信你已經(jīng)了解為什么我說” Zepto 還遠(yuǎn)未成熟“别凤，目前它其實(shí)還僅僅處于“能用”饰序，遠(yuǎn)未達(dá)到 jQuery “好用”的地步
最后，關(guān)于整個(gè) HTML5 觸屏版的前端開發(fā)规哪，我有篇Slide做了總結(jié)求豫，本文只是其中關(guān)于 Zepto 部分的詳細(xì)闡述，感興趣的可以去看看
