對比jQuery和Zepto

JavaScript庫——jQuery和Zepto

jQuery是在Web上應用很普遍的JavaScript庫，它提供了大量的工具和API函數，使用它的人至關廣泛，使用的門檻也比較低。它的API語義對初學者很寬容，出現各類失誤也不會拋出JavaScript錯誤。大多數jQuery方法都是可連接的，也就是說這些方法都會返回jQuery對象，因此能夠把任意多個方法連接到一個DOM引用上。正因如此，爲jQuery貢獻代碼的人不少，致使jQuery的每一個功能都有代價，代碼庫的不斷膨脹，文件尺寸成爲最大負擔。jQuery2.0在這一點上，直接選擇拋棄IE六、IE七、IE8，而這些代碼佔了jQuery1.9中的一大部分，不過不用擔憂，jQuery2.0和1.9是兼容的，也就是說，在全部2.0不支持的瀏覽器上均可以條件化註釋加載jQuery1.9。

<!—[if it IE 9]>

<script src=」jQuery-1.9.x.js」></script>

<![endif]-->

<--[if gte IE 9]><!-->

<script src=」jQuery-2.x.x.js」></script>

<!--<![endif]-->

jQuery的流行程度也是一個值得驕傲的地方，既然那麼多的網站都在使用它，每一個網站單獨引入它的意義不大，不必使用戶每訪問一個用了jQuery的網站都要下載相同的jQuery核心文件。因此Google在CDN（內容傳遞網站）上部署了jQuery，這樣經過改善把jQuery引入網站的方式，達到爲用戶節約下載時間的目的。儘管仍是有不少網站仍把jQuery放在本身的網站上，但已有作夠多的網站用上了Goole的CDN。若是用戶第一次訪問這個網站，也不用下載jQuery。這種方法對性能的改善至關有利，意味着這麼作的網站越多，這種辦法的收益也就越大。Goole的CDN用起來特別簡單，只須要把腳原本源指向Goole的服務器就能夠。

<script src=」//ajax.gooleapis.com/ajax/libs/jquery/1/jquery.min.js」><script>

上面的這段腳本是在請求最新的穩定版jQuery引入網站，但通常不要這樣作，由於jQuery中的API會被廢棄，特別是從1.9到2.0時，因此最好指明須要的版本。

<script src=」//ajax.gooleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js」><script>

這段代碼在路徑中指明要用jQuery的1.9.1版。這裏被忽略的http協議是爲了確保瀏覽器能夠用頁面所用的協議，這樣能夠避免瀏覽器抱怨所請求的資源協議不匹配。但若是使用file：///協議打開本地HTML文件，它將不起做用。

Zepto最初是爲移動端開發的庫，是jQuery的輕量級替代品，由於它的API和jQuery類似，而文件更小，對任何項目都是個不錯的選擇。Zepto最大的優點是它的文件大小，只有8k多一點，是目前功能完備的庫中最小的一個，儘管不大，Zepto所提供的工具足以知足開發程序的須要。大多數在jQuery中·經常使用的API和和方法Zepto都有，Zepto中還有一些jQuery中沒有的，而用一些定製的JavaScript就很容易作出來的API和方法。另外，由於Zepto的API大部分都能和jQuery兼容，因此用起來極其容易，若是熟悉jQuery，就能很容易掌握Zepto。你可用一樣的方式重用jQuery中的不少方法，也能夠方面地把方法串在一塊兒獲得更簡潔的代碼，甚至不用看它的文檔。

針對移動端程序，Zepto還有一些基本的觸摸事件能夠用來作觸摸屏交互，如：tap事件——tap，singleTap，doubleTap，longTap;

Swipe事件——swipe，swipeLeft，swipeRight，swipeUp，swipeDown。

可是有一點，Zepto是不支持IE瀏覽器的，這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊，而是通過了認真考慮後爲了下降文件尺寸而作出的決定，就像jQuery的團隊在2.0版中再也不支持舊版的IE同樣。

長久以來，IE的兼容性問題讓無數開發人員深受其苦。它就是不按標準來，每一個大版本都有本身的怪癖。IE在較新版本中作出很大努力來解決這些兼容性問題。但事實上IE在處理一些JavaScript和DOM問題時仍然再用它本身的非標準方式，而且隨着HTML5標準和特性的出現，它又被其餘主要瀏覽器甩在了後面。

jQuery之類的大多數JavaScript庫都在用額外的代碼解決跨瀏覽器問題，然而爲解決這個問題所編寫的代碼量至關可觀。Zepto爲了瘦身放棄這個問題。這對移動程序來講是很好的，由於在移動終端上通常都不用擔憂會碰到IE。但對桌面程序來講這是個致命的問題。

由於Zepto使用jQuery句法，因此它在文檔中建議把jQuery做爲IE上的後備庫。那樣程序仍能在IE中，而其餘瀏覽器則能享受到Zepto在文件大小上的優點，然而它們兩個的API不是徹底兼容的，因此使用這種方法時必定要當心，並要作充分的測試。

固然，你能夠徹底不用JavaScript庫。即便像Zepto這麼小的JavaScript庫，也會讓程序無故地膨脹起來。本身編寫的JavaScript最大的好處是你只須要編寫和引入須要的東西，而最大的弊端是這樣須要更長的開發時間。按照定義，JavaScript庫會包含程序中經常使用的不少功能，但每一個程序都不可能把全部的功能都用上。那些額外的，用不到的JavaScript就是沒必要要的腫塊。然而你必需要在文件大小和開發時間上做出選擇，若是你歷來沒有從開頭寫過JavaScript程序，可能會低估整個程序所須要的開發時間。相信就算知道必需要寫大量腳原本實現程序所需的所有功能，但你可能沒考慮到爲了支持多個瀏覽器所須要的工做量。

和跨瀏覽器的JS相比，CSS的跨瀏覽器問題簡直就不值一提。早期的瀏覽器戰爭留下了各類稀奇古怪的問題，這些問題日益凸顯，迫使你要爲了避免同瀏覽器作不一樣實現，這些處理方式也略有不一樣。一個常見的例子就是跨瀏覽器時間處理器，好比onclick事件。全部現代瀏覽器都支持用addEvenListener綁定鼠標事件。

Var bt=document.getElementById(「bt」);

bt.addEventListener(「click」,function(e){

       alert(「this is a alert」);

})

 

而IE下的事件綁定的函數是attachEvent,它支持全系列的IE，但若是在Chrome等其餘內核瀏覽器中使用這個函數去綁定事件，瀏覽器會報錯。

Var bt=document.getElementById(「bt」);

bt.attachEvent(「onclick」,function(e){

       alert(「this is a alert」);

})

 

因此，開發中不存在絕對優點，合適地選擇JavaScript庫，或是使用原生JS都是要根據自身的開發需求來權衡的。