对比jQuery和Zepto

时间:2015-06-17 00:34:54   收藏:0   阅读:16064

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 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都是要根据自身的开发需求来权衡的。

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!