11-移動端開發教程-zepto.js入門教程
阿新 • • 發佈：2018-03-28
container request net log 全局 鏈式 tag 優勢 實用
Zepto.js是一個輕量級的針對現代瀏覽器的JavaScript庫， 它與jquery有著類似的api。 如果你會用jquery，那麽你也會用zepto。
1. Why Zepto.js？
- API類似jQuery，熟悉jQuery可以無縫遷移到Zepto.js
- Zepto僅針對高版本現代瀏覽器設計了最小核心的通用庫，代碼體積小，尤其適合移動端開發。
- Zepto增加了針對移動端的觸摸和手勢相關的事件
- 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的源碼自行編譯。
自定義編譯步驟：
- 第一步：下載zeptojs源碼：源碼
- 第二步：解壓源碼，並打開命令行進入源碼根目錄
# 打開命令行工具，進入解壓的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註意事項
- 註意某些模塊必須打包進zeptojs文件才能用，比如：
fx_methods模塊的方法：hide() show()等動畫方法。 - Zepto只設置全局變量$指向它本身。 沒有Zepto.noConflict方法。
- 不支持jQuery CSS 擴展， 然而，可選的“selector”模塊有限提供了支持幾個最常用的偽選擇器
- Zepto.js: 無法獲取隱藏元素寬高；
- Zepto 的選擇器表達式: [name=value] 中value 必須用 雙引號 " or 單引號 ‘ 括起來
- 移動端端點透需要阻止默認行為來規避。
其實還有很多方法的缺失，所以大家自己在寫代碼的時候多留意下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入門教程