移動開發流量省起來之Zepto

時間 2019-11-12

標籤移動開發流量起來 zepto 欄目無線简体版

原文原文鏈接

博主熱衷各類互聯網技術,常囉嗦,時常伴有強迫症，常更新，以爲文章對你有幫助的能夠關注我。轉載請註明"深藍的鐮刀"

事情是這樣的：最近開發的一個手機網站客戶反應訪問起來特別慢，刷了半天才能看到頁面，而後問咱們是否是網站出問題了。因而我趕忙找了各類手機測試一下，沒有問題，首先排除程序錯誤的問題，而後服務器用的又是雲服務器，只要不是在國外應該不會太慢纔對，打聽了一下，原來是該客戶用的是2G網絡訪問的，說是在信號很差的地方几乎刷不出頁面。。。

雖說客戶的網絡質量使人堪憂，不過做爲一個有點追求（強迫症）的攻城獅仍是決定幫他優化一下。

頁面另存爲，打開一個頁面所須要加載的全部資源包括圖片、js、html一共才300K（jquery庫特意使用了壓縮版的，只有100K左右。。。），將圖片各類壓縮，最終仍是有160多K，看來只有把jquery庫給去了，可是將全部的jquery代碼改寫成原生js又有一種想死的感受，並且不少兼容問題層出不窮，那麼有沒有一個既像jquery這麼好用的，又能省流量的js庫呢？答案是：Zepto

一張圖說明Zepto.js的優點：

jquery 1.x最新版284KB,壓縮後94KB；jquery2.x最新版247KB，壓縮後84KB；Zepto最新版54KB，壓縮後9KB！！！

而後看看功能方面。

選擇器

1 <html><body>
2 <ul id="items">
3     <p>This is it!</p>
4 </ul>
5 <script src="./zepto1.1.6.js"></script>
6 <script>
7  alert($("#items").html()); 8 </script>
9 </body></html>

追加

 1 <html><body>
 2 <ul id="items">
 3     <p>This is it!</p>
 4     <p>Hello</p>
 5 </ul>
 6 <script src="./zepto1.1.6.js"></script>
 7 <script>
 8  $('ul').append('<p>new list item</p>')  9 </script>
10 </body></html>

克隆（注：zepto的clone()方法不能像jquery的clone()能夠同時克隆data和綁定事件）css

 1 <html><body>
 2 <ul id="items">
 3     <p>This is it!</p>
 4     <p>Hello</p>
 5 </ul>
 6 <script src="./zepto1.1.6.js"></script>
 7 <script>
 8  $('ul').append($("#items").clone())  9 </script>
10 </body></html>

ajaxhtml

 1 $.ajax({  2  type: 'GET',  3  url: '/projects',  4  data: { name: 'Zepto.js' },  5  dataType: 'json',  6  timeout: 300,  7  context: $('body'),  8  success: function(data){  9  this.append(data.project.html) 10  }, 11  error: function(xhr, type){ 12  alert('Ajax error!') 13  } 14 }) 15 
16 $.ajax({ 17  type: 'POST', 18  url: '/projects', 19  data: JSON.stringify({ name: 'Zepto.js' }), 20  contentType: 'application/json' 21 })

由於Zepto是jQuery-compatible的，全部若是你會使用jquery，那麼你已經會了Zepto。以上這些用法基本與jquery一致，下面說幾個我看到的與jquery不一樣的地方。jquery

1.Zepto基礎庫不支持不少css選擇器

好比很經常使用的$(":selected"),$("p:eq(1)"),$("li:first")這類，不過Zepto的庫提供不少拓展的模塊，你只須要在他的官網上按須要編譯你須要的模塊而後保存爲zepto.js便可，或者直接使用在線編譯，其中若是開啓了selector模塊，你就能支持大部分的css選擇器了。android

2.若是你開啓了detect模塊，那麼你就能夠用Zepto判斷用戶設備、操做系統和瀏覽器的功能(測試了幾個還算能夠用，不知是否準確)

 1 <html><body>
 2 <ul id="items">
 3     <p>This is it!</p>
 4 </ul>
 5 <!-- 該js必須開啓了detect模塊 -->
 6 <script src="./zepto.js"></script>
 7 <script>
 8     // general device type
 9 alert($.os.phone); 10 alert($.os.tablet); 11 
12 // specific OS
13 alert($.os.ios); 14 alert($.os.android); 15 alert($.os.webos); 16 alert($.os.blackberry); 17 alert($.os.bb10); 18 alert($.os.rimtabletos); 19 
20 // specific device type
21 alert($.os.iphone); 22 alert($.os.ipad); 23 alert($.os.ipod); // [v1.1]
24 alert($.os.touchpad); 25 alert($.os.kindle); 26 
27 // specific browser
28 alert($.browser.chrome); 29 alert($.browser.firefox); 30 alert($.browser.safari); // [v1.1]
31 alert($.browser.webview); // (iOS) [v1.1]
32 alert($.browser.silk); 33 alert($.browser.playbook); 34 alert($.browser.ie); // [v1.1]
35 </script>
36 </body></html>

3.若是開啓了form模塊，就能夠對你的表單進行數據序列化，相似jquery的jquery form插件

 1 <html><body>
 2 <form>
 3 <input name="user" value="xxx" type="text"/>
 4 <input name="password" value="123" type="password"/>
 5 </form>
 6 <!-- 該js必須開啓了form模塊 -->
 7 <script src="./zepto.js"></script>
 8 <script>
 9  var formData = $('form').serializeArray(); 10  alert(formData[0]['name']); 11  alert(formData[1]['name']); 12  alert(formData[0]['value']); 13  alert(formData[1]['value']); 14 </script>
15 </body></html>

4.若是開啓了touch模塊，你就可使用tap(觸屏點擊) 和 swipe(觸屏滑動),相似Jquery mobile 插件

 1 <html><body>
 2 
 3 <style>
 4 .delete { display: none; }
 5 #items{font-size:30px;}</style>
 6 
 7 <ul id="items">
 8   <li>List item 1 <span class="delete">DELETE</span></li>
 9   <li>List item 2 <span class="delete">DELETE</span></li>
10 </ul>
11 
12 <!-- 該js必須開啓了touch模塊 -->
13 <script src="./zepto.js"></script>
14 <script>
15 $('#items li').swipe(function(){ 16  $('.delete').hide() 17  $('.delete', this).show() 18 }) 19 
20 $('.delete').tap(function(){ 21  $(this).parent('li').remove() 22 }) 23 </script>
24 </body></html>

注：Zepto的swipe事件在某些Android手機(如安卓4.4)仍存在不起做用的狀況。期待Zepto修復這個bug。ios

這麼多有用的模塊若是用jquery來實現，除了須要加載那個壓縮後還有90多KB的核心庫外，我還要加載各類插件諸如jquery mobile,jquery form,jquery detect等等，這個大小不用我說，要多臃腫多臃腫，而Zepto所有開啓模塊後只有39KB，因此說做爲業績良心省流量的手機網站仍是使用Zepto吧。

總的來講，Zepto像是一個 Jquery體系的一個精簡版，專一於移動端，兼顧主流PC瀏覽器，對於Jquery庫的文件大小問題我猜測Jquery在發展的同時可能由於不少歷史遺留問題還有須要兼顧各類並非主流的瀏覽器致使代碼略臃腫。