Question

移动浏览器项目WebApp需要jQuery吗？移动设备放弃jQuery的理由求答案

Answer 1

众所周知，移动设备与固定装置最明显的一点不同是：带宽的问题。在移动设备上加载外部资源肯定要比固定装置设备加载外部资源要缓慢的多。我们将问题引向前端框架，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框架，你应该这样做：
document.querySelector(DOM);
querySelector
是一个更容易、更快、更可靠的本地选择器引擎。你也可以利用3行代码封装一个像jQuery那样的函数来使用选择器
function$(query){
returndocument.querySelectorAll(query);}这里就有你喜欢的$，仅仅3行代码就搞定了！你也许可能会问利用getElementById获取DOM会更加的快，这很不错。 getElementById方法获取DOM确实快些，但是这个方法适用于页面中元素较多的情况下，你才能够感觉到它的快感，但是WebApp是不可能在 同一张页面中有很多元素的，它不会像Web产品一样。所以在这里我不建议前端工程师为了这个感觉不到的快，而放弃使用 querySelectorAll/querySelector而使用getElementById重新封装。而且在实际的项目开发中，你也可以将获取到 的DOM保存在变量中，这样也同样减少了对DOM的访问。
DOMReady Function
当然，有些时候我们可能需要等待DOM加载完毕后才去执行我们的function。jQuery有ready方法，我们同样可以拥有自己我的ready方法。
functionready(fn){
document.addEventListener('DOMContentLoaded',fn,false);}所以的函数的都将在DOM元素加载完毕后，立刻执行，这里不包括image|audio|video。
ready(function(){
alert($('#demo')[0].innerHTML);});可能你已经发现了，这样的ready方法并不是很灵活。首先你不能够卸载DOMContentLoaded事件，每调用ready方法，都会为 document注册DOMContentLoaded事件；其次当DOM加载完毕后，仅仅执行了一个函数的一次调用。这不是我们想要的，我们需要改进 它。
varreadyFuns=[];
functionDOMReady(){
for(vari=0,l=readyFuns.length;i<l;i++){
readyFun[i]();}readyFuns=null;
document.removeEventListener('DOMContentLoaded',DOMReady,false);}functionreadyFun(fn){
document.addEventListener('DOMContentLoaded',DOMReady,false);}readyFuns.push(fn);}这样貌似解决了我们以上的两个问题。现在的DOMReady方法可以保证在DOM加载完毕后，一次执行多个函数，且支持卸载 DOMContentLoaded事件。在WebApp中封装一个domready方法，你无需考虑IE浏览器或其它的济览器，仅仅考虑WebKit内核 的浏览器即可，所以你可以使用一对removeEventListener和addEventListener。