对比jQuery和Zepto

JavaScript库——jQuery和Zepto

jQuery是在Web上应用很广泛的JavaScript库，它提供了大量的工具和API函数，使用它的人相当普遍，使用的门槛也比较低。它的API语义对初学者很宽容，出现各种失误也不会抛出JavaScript错误。大多数jQuery方法都是可链接的，也就是说这些方法都会返回jQuery对象，所以可以把任意多个方法链接到一个DOM引用上。正因如此，为jQuery贡献代码的人很多，导致jQuery的每个功能都有代价，代码库的不断膨胀，文件尺寸成为最大负担。jQuery2.0在这一点上，直接选择抛弃IE6、IE7、IE8，而这些代码占了jQuery1.9中的一大部分，不过不用担心，jQuery2.0和1.9是兼容的，也就是说，在所有2.0不支持的浏览器上都可以条件化注释加载jQuery1.9。

<--[if gte IE 9]>

jQuery的流行程度也是一个值得骄傲的地方，既然那么多的网站都在使用它，每个网站单独引入它的意义不大，没必要使用户每访问一个用了jQuery的网站都要下载相同的jQuery核心文件。所以Google在CDN（内容传递网站）上部署了jQuery，这样通过改善把jQuery引入网站的方式，达到为用户节约下载时间的目的。尽管还是有很多网站仍把jQuery放在自己的网站上，但已有做够多的网站用上了Goole的CDN。如果用户第一次访问这个网站，也不用下载jQuery。这种方法对性能的改善相当有利，意味着这么做的网站越多，这种办法的收益也就越大。Goole的CDN用起来特别简单，只需要把脚本来源指向Goole的服务器就可以。

上面的这段脚本是在请求最新的稳定版jQuery引入网站，但一般不要这样做，因为jQuery中的API会被废弃，特别是从1.9到2.0时，所以最好指明需要的版本。

这段代码在路径中指明要用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都是要根据自身的开发需求来权衡的。