您的WebApp真的需要jQuery吗？

Question

您的WebApp真的需要jQuery吗？

首先要承认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<l;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％的代码。