zepto.js的注意點

移動端開發類庫為什要用zepto，為什麼不是 jQuery 呢？因為 jQuery 的目標是相容所有主流瀏覽器，這就意味著它的大量程式碼對移動端的瀏覽器是無用或者低效的。
而 Zepto 只針對移動端瀏覽器編寫，因此體積更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以學習成本也很低。

但是在開發過程中，我發現 Zepto 還遠未成熟，其中包含了一些或大或小的“坑”，與 jQuery 的差距還是很明顯的，所以寫篇文章記錄下，希望對後來者有幫助
注意，本文撰寫時 Zepto 版本為 1.0 正式版

從哪裡下載 Zepto
這個問題看起來很蠢，從官網下載不就行了嘛！可是你有沒有發現下載連結上面有行小字呢？

There are more modules; a list of all modules is available in the README.
在這個 README 裡面你會驚奇地發現，Zepto 原始碼中有 14 個模組，而官網提供的標準版裡面只有 7 個模組！而且居然不包含對移動端開發非常重要的 touch 模組（提供對觸控事件的支援）！

所以我的建議是，不要從官網下載，而是從 Github 下載了原始碼之後自己 Build 一個版本，這樣你可以自行挑選適合的模組。比如我挑選的模組是這麼幾個：

• polyfill，zepto，detect，event，ajax，form，fx 這7個就是標準版包含的模組
• fx_methods 有了這個模組之後，.show() .hide() 等幾個方法才能支援動畫了，比如 .show(‘fast’)
• data 提供對 .data() 方法的完整支援，像 jQuery 一樣用記憶體物件儲存
• assets 移除 img 元素後做一些特殊處理，用來清理記憶體
• selector 更多的選擇器的支援，後面會提到
• touch 對觸控事件的支援，比如 tap 事件

如果你對 Node 不瞭解不知道如何 Build 的話，可以下載我的版本

不要用 click 事件，用 tap 代替

這個估計已經廣為人知了，因為 click 事件有 200~300 ms 的延遲，為了更快的響應，最好用 Zepto 提供的 tap 事件
不相信的話，可以用以下程式碼測試一下

var t1,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 介面。
這個介面只支援標準的 CSS 選擇器，而上面提到的那些屬於 jQuery 選擇器擴充套件，所以仔細看看這個網頁，注意一下這些選擇器。

當然也有好訊息，就是上面提到的 selector 模組，如果有這個模組的話，能夠支援 部分 的 jQuery 選擇器擴充套件，列舉如下：

• :visible :hidden
• :selected :checked
• :parent
• :first :last :eq
• :contains :has

元素的尺寸計算

首先 Zepto 沒有 .innerHeight() .outerWidth() 等四個方法，其次，它的 .height()/.width() 方法也不完善，對於 display:none 的元素，計算出的高寬都是 0
而這在 jQuery 裡面是沒有問題的，因為 jQuery 針對這種元素，會先設定其 css 樣式設定為 position: “absolute”, visibility: “hidden”, display: “block” 。
計算完高寬後再恢復，參見
https://github.com/jquery/jquery/blob/master/src/css.js#L460
如果遇到這種特殊情況，可以參考 jQuery 寫一個類似的方法

.prop() 方法的陷阱

有次我要把一個文字框置為只讀，寫了這麼一行 (‘#text’).prop(‘readonly’, true) 結果死活不工作  
找了半天才發現，正確的寫法是這樣(‘#text’).prop(‘readOnly’, true) ，如果你居然看不出兩者的差別，那麼悄悄提示你：注意大小寫！
翻了一下相關的文件，原來只讀屬性的正確拼法確實是 readOnly，可是在 jQuery 裡面上一段程式碼卻能正常工作。於是到 jQuery 原始碼裡面一找才發現，還有這麼一段 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 的成熟度真是難以超越，因為他把我們都慣壞了……
考慮到這段程式碼比較簡單，我厚顏無恥地抄襲了一下然後給 Zepto 提了一個 pull request ，如果你們喜歡這種無腦的用法，可以去評論表達支援（記得用英文）
2013-11-25 這個 PR 已經被 Merge

.show() 的動畫效果

如果沒有 fx_mehods 模組的話，.show() 方法是不支援動畫的，不過有了這模組後，動畫的支援還是有點小問題，比如這麼一段 HTML

<div style="background:black;opacity:0.7;display:none">
    test
</div>

如果你呼叫 $(‘div’).show(‘fast’) ，那麼動畫完成後你看到的不會是一個半透明的元素，而是全黑不透明的
因為 Zepto 的 .show() 動畫實現的很簡單，沒有高寬的變化，而是將透明度從 0 逐漸變為 1，所以元素上原來設定的透明度就被替代了。
這種情況下，可以用 .fadeIn() 方法來替代 .show()

結語

看到這裡相信你已經瞭解為什麼我說” Zepto 還遠未成熟“，目前它其實還僅僅處於“能用”，遠未達到 jQuery “好用”的地步
最後，關於整個 HTML5 觸屏版的前端開發，我有篇 Slide 做了總結，本文只是其中關於 Zepto 部分的詳細闡述，感興趣的可以去看看。