11-移動端開發教程-zepto.js入門教程

標籤：移動   目錄   開啟   arc   ofo   pac   dem   makefile   適合   

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

3. 第三步：修改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(‘ ‘)

 

4. 第四步：編譯最終的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開發值得推薦。

11-移動端開發教程-zepto.js入門教程