WebApp是否真的需要jQuery

這篇文章給大家介紹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框架，你應該這樣做：

document.querySelector(DOM);

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

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

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

DOMReady Function

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

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

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

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

可能你已經發現了，這樣的ready方法并不是很靈活。首先你不能夠卸載DOMContentLoaded事件，每調用ready方法，都會為document注冊DOMContentLoaded事件；其次當DOM加載完畢后，僅僅執行了一個函數的一次調用。這不是我們想要的，我們需要改進它。

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);    }

這樣貌似解決了我們以上的兩個問題。現在的DOMReady方法可以保證在DOM加載完畢后，一次執行多個函數，且支持卸載DOMContentLoaded事件。在WebApp中封裝一個domready方法，你無需考慮IE瀏覽器或其它的濟覽器，僅僅考慮WebKit內核的瀏覽器即可，所以你可以使用一對removeEventListener和addEventListener。這兩個方法同樣也是W3C的標準方法，所以我們已經覆蓋了jQuery的DOMReady50％的代碼。

關于WebApp是否真的需要jQuery就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。