您的WebApp真的需要jQuery嗎？
首先要承認jQuery的強大魅力，是jQuery陪伴著我們度過桌面瀏覽器開發(fā)的每一天，它的使用輕巧人人皆知，這是桌面瀏覽器項目常用的主流框架之一。但是在移動瀏覽器項目中，比如WebApp，你真的愿意引用這樣一個龐大且腫脹的前端框架么？你真的需要它么？其實你不需要，因為現(xiàn)在的高端移動設(shè)備中的API已經(jīng)足夠了。
接下來我們談?wù)勀銘?yīng)該在移動設(shè)備上放棄jQuery的理由。
為什么前端工程師需要在乎移動設(shè)備上的前端框架？
眾所周知，移動設(shè)備與固定裝置最明顯的一點不同是：帶寬的問題。在移動設(shè)備上加載外部資源肯定要比固定裝置設(shè)備加載外部資源要緩慢的多。我們將問題引向前端框架，jQuery***版本的min版本為77KB，僅這一點就需要前端工程師折衷。
jQuery中占了很大一個比重的則是Sizzle選擇器，這是一個兼容多平臺的javascript selector開源框架，但是在移動設(shè)備中我們真的不需要這個Sizzle選擇器，另外一部分則是jQuery的動畫類庫，這個也是兼容多平臺的動畫類庫，但是在WebApp中，我們同樣不需要，我們需要CSS 3的translate和animation即可完成需求，***一個算是jQuery的OOP了，這個完全不需要，開發(fā)者完全可以根據(jù)自己的專業(yè)技能封裝一套OOP的方法。
首先來看javascript selector
我們做DHTML網(wǎng)站通常情況也都是對DOM做操作，jQuery可以說是一個非常輕巧且功能強大的靈活操作DOM的JavaScript框架，你在使用jQuery操作DOM時，就像是在玩魔術(shù)一樣的神奇，這也正是jQuery的設(shè)計初衷。
但是當前你的用戶群是Iphone、Android、Ipad、Blackberry等等一些高端用戶時，你不應(yīng)該為了使用選擇器而再引入這樣一個龐大的JavaScript框架，你應(yīng)該這樣做：
- document.querySelector(DOM);
querySelector是一個更容易、更快、更可靠的本地選擇器引擎。你也可以利用3行代碼封裝一個像jQuery那樣的函數(shù)來使用選擇器
- function $(query) {
- return document.querySelectorAll(query);
- }
這里就有你喜歡的$，僅僅3行代碼就搞定了！你也許可能會問利用getElementById獲取DOM會更加的快，這很不錯。getElementById方法獲取DOM確實快些，但是這個方法適用于頁面中元素較多的情況下，你才能夠感覺到它的快感，但是WebApp是不可能在同一張頁面中有很多元素的，它不會像Web產(chǎn)品一樣。所以在這里我不建議前端工程師為了這個感覺不到的快，而放棄使用querySelectorAll/querySelector而使用getElementById重新封裝。而且在實際的項目開發(fā)中，你也可以將獲取到的DOM保存在變量中，這樣也同樣減少了對DOM的訪問。
DOMReady Function
當然，有些時候我們可能 需要等待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方法，都會為document注冊DOMContentLoaded事件；其次當DOM加載完畢后，僅僅執(zhí)行了一個函數(shù)的一次調(diào)用。這不是我們想要的，我們需要改進它。
- 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);
- }
這樣貌似解決了我們以上的兩個問題?，F(xiàn)在的DOMReady方法可以保證在DOM加載完畢后，一次執(zhí)行多個函數(shù)，且支持卸載DOMContentLoaded事件。在WebApp中封裝一個domready方法，你無需考慮IE瀏覽器或其它的濟覽器，僅僅考慮WebKit內(nèi)核的瀏覽器即可，所以你可以使用一對removeEventListener和addEventListener。這兩個方法同樣也是W3C的標準方法，所以我們已經(jīng)覆蓋了jQuery的DOMReady50％的代碼。
【編輯推薦】
