您的WebApp真的需要jQuery吗?
创始人
2024-07-19 18:20:53
0

首先要承认jQuery的强大魅力,是jQuery陪伴着我们度过桌面浏览器开发的每一天,它的使用轻巧人人皆知,这是桌面浏览器项目常用的主流框架之一。但是在移动浏览器项目中,比如WebApp,你真的愿意引用这样一个庞大且肿胀的前端框架么?你真的需要它么?其实你不需要,因为现在的高端移动设备中的API已经足够了。

接下来我们谈谈你应该在移动设备上放弃jQuery的理由。

为什么前端工程师需要在乎移动设备上的前端框架?

众所周知,移动设备与固定装置最明显的一点不同是:带宽的问题。在移动设备上加载外部资源肯定要比固定装置设备加载外部资源要缓慢的多。我们将问题引向前端框架,jQuery***版本的min版本为77KB,仅这一点就需要前端工程师折衷。

jQuery中占了很大一个比重的则是Sizzle选择器,这是一个兼容多平台的javascript selector开源框架,但是在移动设备中我们真的不需要这个Sizzle选择器,另外一部分则是jQuery的动画类库,这个也是兼容多平台的动画类库,但是在WebApp中,我们同样不需要,我们需要CSS 3的translate和animation即可完成需求,***一个算是jQuery的OOP了,这个完全不需要,开发者完全可以根据自己的专业技能封装一套OOP的方法。

首先来看javascript selector

我们做DHTML网站通常情况也都是对DOM做操作,jQuery可以说是一个非常轻巧且功能强大的灵活操作DOM的JavaScript框架,你在使用jQuery操作DOM时,就像是在玩魔术一样的神奇,这也正是jQuery的设计初衷。

但是当前你的用户群是Iphone、Android、Ipad、Blackberry等等一些高端用户时,你不应该为了使用选择器而再引入这样一个庞大的JavaScript框架,你应该这样做:

  1. document.querySelector(DOM);  

querySelector是一个更容易、更快、更可靠的本地选择器引擎。你也可以利用3行代码封装一个像jQuery那样的函数来使用选择器

  1. function $(query) {    
  2.      return document.querySelectorAll(query);    
  3. }  

这里就有你喜欢的$,仅仅3行代码就搞定了!你也许可能会问利用getElementById获取DOM会更加的快,这很不错。getElementById方法获取DOM确实快些,但是这个方法适用于页面中元素较多的情况下,你才能够感觉到它的快感,但是WebApp是不可能在同一张页面中有很多元素的,它不会像Web产品一样。所以在这里我不建议前端工程师为了这个感觉不到的快,而放弃使用querySelectorAll/querySelector而使用getElementById重新封装。而且在实际的项目开发中,你也可以将获取到的DOM保存在变量中,这样也同样减少了对DOM的访问。

DOMReady Function

当然,有些时候我们可能需要等待DOM加载完毕后才去执行我们的function。jQuery有ready方法,我们同样可以拥有自己我的ready方法。

  1. function ready (fn) {    
  2.     document.addEventListener('DOMContentLoaded', fn, false);    
  3. }  

所以的函数的都将在DOM元素加载完毕后,立刻执行,这里不包括image|audio|video。

  1. ready(function (){    
  2.     alert($('#demo')[0].innerHTML);    
  3. });  

可能你已经发现了,这样的ready方法并不是很灵活。首先你不能够卸载DOMContentLoaded事件,每调用ready方法,都会为document注册DOMContentLoaded事件;其次当DOM加载完毕后,仅仅执行了一个函数的一次调用。这不是我们想要的,我们需要改进它。

  1. var readyFuns = [];    
  2. function DOMReady(){    
  3.     for(var i=0,l=readyFuns.length;i
  4.       readyFun[i]();    
  5.     }    
  6.     readyFuns = null;    
  7.     document.removeEventListener('DOMContentLoaded',DOMReady,false);    
  8. }    
  9. function readyFun(fn){    
  10.     if(readyFuns.length == 0){    
  11.        document.addEventListener('DOMContentLoaded',DOMReady,false);    
  12.     }    
  13.     readyFuns.push(fn);    
  14. }  

这样貌似解决了我们以上的两个问题。现在的DOMReady方法可以保证在DOM加载完毕后,一次执行多个函数,且支持卸载DOMContentLoaded事件。在WebApp中封装一个domready方法,你无需考虑IE浏览器或其它的济览器,仅仅考虑WebKit内核的浏览器即可,所以你可以使用一对removeEventListener和addEventListener。这两个方法同样也是W3C的标准方法,所以我们已经覆盖了jQuery的DOMReady50%的代码。

【编辑推荐】

  1. Django创始人:从技术工艺上考量jQuery
  2. MooTools团队成员:我们为何强于jQuery
  3. jQuery作为“JavaScript库MVP”的12大理由
  4. jQuery让开发者恋恋不舍的秘密
  5. 不只是口号 jQuery的设计艺术

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...