对比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 it IE9]>

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

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

<script src="jQuery-1.9.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/1jquery.min.js"></script>

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

<script src="//ajax.gooleapis.com/ajax/libs/jquery/1.9.1/jquer.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都是要根据自身的开发需求来权衡的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,105评论 24 450
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,451评论 1 19
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,129评论 0 0
  • 上午去拜年了,又是去的杨梅戈,好熟悉的地方,今年的人似乎少了许多,烟火也少了许多。 大概很多人为了挣钱都没回来吧。...
    47a5445d9005阅读 159评论 0 0
  • 时光匆匆,岁月无情, 转眼又是一个冬, 在这个寒冷的季节, 只想问候一下远方的朋友, 送去一份深藏已久的关心, 你...
    秋月私语阅读 404评论 2 0