zepto.js使用前注意

API：http://www.css88.com/doc/zeptojs_api/

1、建議：不要從官網下載，而是從 Github 下載了源代碼以後本身 Build 一個版本，這樣你能夠自行挑選適合的模塊。好比我挑選的模塊是這麼幾個：

• polyfill，zepto，detect，event，ajax，form，fx 這7個就是標準版包含的模塊
• fx_methods 有了這個模塊以後，.show() .hide() 等幾個方法才能支持動畫了，好比 .show('fast')
• data 提供對 .data() 方法的完整支持，像 jQuery 同樣用內存對象存儲
• assets 移除 img 元素後作一些特殊處理，用來清理內存
• selector 更多的選擇器的支持，後面會提到
• touch 對觸摸事件的支持，好比 tap 事件

2、不要用 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);
});

 

3、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 ，若是大家喜歡這種無腦的用法，能夠去評論表達支持（記得用英文）

.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()