首先要承認(rèn)jQuery的強(qiáng)大魅力，是jQuery陪伴著我們度過(guò)桌面瀏覽器開(kāi)發(fā)的每一天，它的使用輕巧人人皆知，這是桌面瀏覽器項(xiàng)目常用的主流框架之一。但是在移動(dòng)瀏覽器項(xiàng)目中，比如WebApp，你真的愿意引用這樣一個(gè)龐大且腫脹的前端框架么？你真的需要它么？其實(shí)你不需要，因?yàn)楝F(xiàn)在的高端移動(dòng)設(shè)備中的API已經(jīng)足夠了。

接下來(lái)我們談?wù)勀銘?yīng)該在移動(dòng)設(shè)備上放棄jQuery的理由。

為什么前端工程師需要在乎移動(dòng)設(shè)備上的前端框架？

眾所周知，移動(dòng)設(shè)備與固定裝置最明顯的一點(diǎn)不同是：帶寬的問(wèn)題。在移動(dòng)設(shè)備上加載外部資源肯定要比固定裝置設(shè)備加載外部資源要緩慢的多。我們將問(wèn)題引向前端框架，jQuery最新版本的min版本為77KB，僅這一點(diǎn)就需要前端工程師折衷。

jQuery中占了很大一個(gè)比重的則是Sizzle選擇器，這是一個(gè)兼容多平臺(tái)的javascript selector開(kāi)源框架，但是在移動(dòng)設(shè)備中我們真的不需要這個(gè)Sizzle選擇器，另外一部分則是jQuery的動(dòng)畫(huà)類庫(kù)，這個(gè)也是兼容多平臺(tái)的動(dòng)畫(huà)類庫(kù)，但是在WebApp中，我們同樣不需要，我們需要CSS 3的translate和animation即可完成需求，最后一個(gè)算是jQuery的OOP了，這個(gè)完全不需要，開(kāi)發(fā)者完全可以根據(jù)自己的專業(yè)技能封裝一套OOP的方法。

首先來(lái)看javascript selector

我們做DHTML網(wǎng)站通常情況也都是對(duì)DOM做操作，jQuery可以說(shuō)是一個(gè)非常輕巧且功能強(qiáng)大的靈活操作DOM的JavaScript框架，你在使用jQuery操作DOM時(shí)，就像是在玩魔術(shù)一樣的神奇，這也正是jQuery的設(shè)計(jì)初衷。

但是當(dāng)前你的用戶群是Iphone、Android、Ipad、Blackberry等等一些高端用戶時(shí)，你不應(yīng)該為了使用選擇器而再引入這樣一個(gè)龐大的JavaScript框架，你應(yīng)該這樣做：

document.querySelector(DOM);??

querySelector是一個(gè)更容易、更快、更可靠的本地選擇器引擎。你也可以利用3行代碼封裝一個(gè)像jQuery那樣的函數(shù)來(lái)使用選擇器

function?$(query)?{?? ?

?????return?document.querySelectorAll(query);?? ?

}??

這里就有你喜歡的$，僅僅3行代碼就搞定了！你也許可能會(huì)問(wèn)利用getElementById獲取DOM會(huì)更加的快，這很不錯(cuò)。getElementById方法獲取DOM確實(shí)快些，但是這個(gè)方法適用于頁(yè)面中元素較多的情況下，你才能夠感覺(jué)到它的快感，但是WebApp是不可能在同一張頁(yè)面中有很多元素的，它不會(huì)像Web產(chǎn)品一樣。所以在這里我不建議前端工程師為了這個(gè)感覺(jué)不到的快，而放棄使用querySelectorAll/querySelector而使用getElementById重新封裝。而且在實(shí)際的項(xiàng)目開(kāi)發(fā)中，你也可以將獲取到的DOM保存在變量中，這樣也同樣減少了對(duì)DOM的訪問(wèn)。

DOMReady Function

當(dāng)然，有些時(shí)候我們可能需要等待DOM加載完畢后才去執(zhí)行我們的function。jQuery有ready方法，我們同樣可以擁有自己我的ready方法。

function?ready?(fn)?{?? ?

????document.addEventListener('DOMContentLoaded',?fn,?false);?? ?

}??

所以的函數(shù)的都將在DOM元素加載完畢后，立刻執(zhí)行，這里不包括image|audio|video。

ready(function?(){?? ?

????alert($('#demo')[0].innerHTML);?? ?

});??

可能你已經(jīng)發(fā)現(xiàn)了，這樣的ready方法并不是很靈活。首先你不能夠卸載DOMContentLoaded事件，每調(diào)用ready方法，都會(huì)為document注冊(cè)DOMContentLoaded事件；其次當(dāng)DOM加載完畢后，僅僅執(zhí)行了一個(gè)函數(shù)的一次調(diào)用。這不是我們想要的，我們需要改進(jìn)它。

var?readyFuns?=?[];?? ?

function?DOMReady(){?? ?

????for(var?i=0,l=readyFuns.length;i<l;i++){?? ?

??????readyFun[i]();?? ?

????}?? ?

????readyFuns?=?null;?? ?

????document.removeEventListener('DOMContentLoaded',DOMReady,false);?? ?

}?? ?

function?readyFun(fn){?? ?

????if(readyFuns.length?==?0){?? ?

???????document.addEventListener('DOMContentLoaded',DOMReady,false);?? ?

????}?? ?

????readyFuns.push(fn);?? ?

}??

這樣貌似解決了我們以上的兩個(gè)問(wèn)題。現(xiàn)在的DOMReady方法可以保證在DOM加載完畢后，一次執(zhí)行多個(gè)函數(shù)，且支持卸載DOMContentLoaded事件。在WebApp中封裝一個(gè)domready方法，你無(wú)需考慮IE瀏覽器或其它的濟(jì)覽器，僅僅考慮WebKit內(nèi)核的瀏覽器即可，所以你可以使用一對(duì)removeEventListener和addEventListener。這兩個(gè)方法同樣也是W3C的標(biāo)準(zhǔn)方法，所以我們已經(jīng)覆蓋了jQuery的DOMReady50％的代碼。

轉(zhuǎn)載于:https://www.cnblogs.com/fullhouse/archive/2011/12/16/2290068.html

總結(jié)

以上是生活随笔為你收集整理的您的WebApp真的需要jQuery吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。