瞭解輕量級的移動開發Javascript類庫- Zepto.js

來源：瞭解輕量級的移動開發Javascript類庫- Zepto.js

現代的javascript類庫都非常巨大，看看jQuery就可以了，當你需要創建一個基於移動設備的應用，這些類庫顯得非常臃腫，記得前段時間我們介紹過的5個jQuery的備選輕量級移動客戶端開發(Mobile development)類庫？其中就有我們今天即將介紹的zepto.js。

移動設備中使用桌面類庫和的幾個問題

新酷技術支持下的互聯網在最近發展的很快，幾乎是跳躍的發展。我們從靜態的頁面發展到動態的web應用程序，然後到實時的動態高度responsive的web應用。其中最明顯的就是移動客戶端的而發展。

大家想想，很多用戶都使用智能手機，甚至在家裏我們也願意是用平板電腦進行瀏覽和上網。這類的設備都非常適合進行頁面瀏覽工作。

作爲一個開發人員來說，我們需要考慮相關的因素，例如，帶寬資源。很多時候不是所有的設備都擁有超棒的硬件條件或者網絡狀況。

我估計大家已經猜到了我介紹的以上內容。 很多超大的類庫jQuery或者Prototype肯定在移動開發中扮演重要的角色，但是依然很多情況下你需要使用更加銳利的類庫，相信很多的開發人員都同意我的觀點。

所有代碼使得一個類庫可以兼容所有的瀏覽器

另外一個很大的問題在於一些很知名的類庫都使用了大量代碼來兼容不同的瀏覽器。事實上，jQuery就內建了很多代碼用來處理不同瀏覽器的兼容性問題，這些問題往往對於開發人員是比較難於克服的。事實上，即使現在jQuery很實用了很多代碼用來處理不同瀏覽器的兼容性問題。

但是如果我們需要開發的應用只需要支持特定的設備呢？你是不是覺得還有必要去處理如此多的兼容性問題？

如果你去掉這些代碼，你可以：

• 去掉代碼可以大大提高性能 
• 是的你開發文件更小，幫助客服移動設別帶寬問題

是不是覺得我們小題大作了？看看下面的jQuery代碼吧：

isPlainObject: function( obj ) {
        // Must be an Object.
        // Because of IE, we also have to check the presence of the constructor property.
        // Make sure that DOM nodes and window objects don't pass through, as well
        if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
            return false;
        }
....

或者這些：

// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
    Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch( e ) {
    // The intended fallback
}
....

代碼可能並不是很複雜，但是你看到的確處理了很多的不同設備瀏覽器的問題。如果所有這些代碼加起來，最後的性能問題我覺得你不得不考慮。

使用Zepto有什麼區別？

我可以聽到大家再說”說的夠多的了！告訴我們這個類庫“。接下來我們開始介紹它

Zepto是一個javascript的框架用來處理我們上面提到的問題。非常小的一個代碼，總共只有8kb。

它刪除了處理跨瀏覽器問題的代碼，因此非常的苗條。當初開發的時候，就是用來處理webkit內核瀏覽器。當然mobile版本的webkit。現在它已經擴展支持桌面瀏覽器。當然，只支持現代瀏器。 別指望它支持IE6這種古董界別的瀏覽器。

另外一個使得zepto非常輕量級的原因是避免了太多的特性。核心類庫不包含過多的功能。甚至是AJAX和動畫功能都是作爲模塊獨立存在的。對於那些主要使用類庫來處理DOM操作的人來說，這個類庫非常棒。

還有一點，zepto的類庫和jQuery類庫是兼容的。如果你使用jQuery，其實你已經知道如何使用zepto了。

Zepto和jQuery是否可以互換？

是的！因爲Zepto的核心API很大程度的模仿了jQuery類庫。目的是爲了減少學習難度。很多的方法，例如，處理DOM操作，都使用一樣參數，甚至一樣的順序。我們看看下面例子：

$('#gbin1element').html("Hey! Are you using gbin1.com?");

看起來是不是非常熟悉？實際上和你使用jQuery來開發代碼一模一樣。而不僅僅是這一個方法。很多其它的功能API類似，例如，AJAX。

另一方面， API並不是100%的一樣。Zepto放棄了一些在jQuery中破壞你的代碼的方法。事實上，zepto是jQuery的一個子集，你可能會錯過一些特別的內建功能，例如，Deferred。你不能指望在zepot和jQuery中方法執行一樣。

對於我來說，最大的障礙在於很多方法都來自於jQuery，但是有不同的特性。有些時候最讓人惱火的是你認爲這麼使用正確，但是其實並不正確。clone方法來拷貝事件handler就是一個很好的例子。如果不看代碼的話，絕對不知道這個問題。

瞭解核心的API

廢話不說了，這裏我們開始介紹核心API。

修改一個容器的HTML內容

這是典型的DOM操作：讀取並且修改HTML的內容。使用zepto，你可以調用html方法，傳遞新的HTML，如下：

var containerText = $('#gbin1element').html();

或者修改內容：

$('#gbin1element').html("do you use gbin1.com");

是不是很簡答？

向一個容器添加或者前端添加元素

和jQuery類似，zepto也使用append和preappend方法。如下：

$('#gbin1element').append("<p>This is the appended element.</p>");

或者

$('#gbin1element').prepend("<p>This is the appended element.</p>");

事件(Events)

Zepto提供了一堆非常容易使用的方法。很多都是基於on方法，是不是和jQuery很類似？

$('#gbin1element').on('click', function(e){
   // 添加你需要執行的代碼
});

如果你覺得需要使用bind，delegate或者live，千萬不要，因爲和jQuery一樣，這些方法都已經deprecated了。

AJAX

很多現代類庫都提供使用簡答的AJAX方法，zepto也不例外。

$.ajax({
  type: 'POST',
  url: '/project',
  data: { name: 'gbin1.com' },
  dataType: 'json',
  success: function(data){
    //成功時執行的方法
  },
  error: function(xhr, type){
    alert('Hi, Not work?')
  }
});

看起來複雜，其實非常明瞭。

• 創建一個AJAX對象並且傳遞參數
• 指定POST方法。缺省應該是GET
• 指定POST處理的URL
• 指定需要傳遞到服務器URL的參數，這裏我們創建了gbin1.com這個值。
• 指定方法成功後或者失敗執行的callback。

對於jQuery來說，它擁有分開的GET和POST及其load方法

動畫

那麼動畫如何處理呢？Zepto提供了animate方法用來處理動畫：

$('#gbin1element').animate({
  opacity: 0.50, top: '30px', color: '#656565'
}, 0.5)

我們只需要選擇執行動畫的元素，調用anmiate方法，指定動畫屬性，zepto會幫助我們處理其它。

如果你需要顯示/隱藏元素，調用toggle方法。

到這裏我相信大家都非常清楚了 - Zepto的DOM，動畫和事件API都不同程度模仿了jQuery，我們都知道jQuery非常擅長處理這些。如果你使用過jQuery，那麼使用zepto絕對很簡單。

觸摸事件及其其它超棒的特性

Zepto也提供了對於觸摸設備的事件支持，如下：

• swipe
• tap
• doubleTap
• longTap - 當你長按超過750ms會觸發這個事件

這裏是一個例子：

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>

當你揮擊一個項目，其它項目的刪除按鈕會隱藏，點擊刪除，這個項目會被刪除。

總結

以上就是所有的Zepto介紹，可能仁者見仁，智者見智，不同人對於這個類庫理解也不一樣。可能你依然願意使用jQuery來處理web應用，但是還是希望你能夠使用zepto來嘗試一樣，畢竟倆者的代碼構造變化不大，希望大家覺得這篇文章有幫助，如果你有問題，請給我們留言，謝謝！

via tutsplus

來源：瞭解輕量級的移動開發Javascript類庫- Zepto.js