網站如何做到完全不需要jQuery也可以滿足簡單需求

　　據統計目前全世界%的網站使用它也就是說個網站裡面有個使用jQuery如果只考察使用工具庫的網站這個比例就會上升到驚人的%

　　

　　雖然jQuery如此受歡迎但是它臃腫的體積也讓人頭痛不已jQuery 的原始大小為KB優化後為KB如果是支持IE的jQuery 原始大小為KB優化後為KB

　　這樣的體積即使是寬帶環境完全加載也需要秒或更長更不要說移動設備了這意味著如果你使用了jQuery用戶至少延遲秒才能看到網 頁效果考慮到本質上jQuery只是一個操作DOM的工具我們不僅要問如果只是為了幾個網頁特效是否有必要動用這麼大的庫？

　　

　　年jQuery誕生的時候主要用於消除不同浏覽器的差異（主要是IE）為開發者提供一個簡潔的統一接口相比當時如今的情況已經發生了很大的變化IE的市場份額不斷下降以ECMAScript為基礎的JavaScript標准語法正得到越來越廣泛的支持開發者直接使用JavScript標准語法就能同時在各大浏覽器運行不再需要通過jQuery獲取兼容性

　　下面就探討如何用JavaScript標准語法取代jQuery的一些主要功能做到jQueryfree

　　

　　一選取DOM元素

　　jQuery的核心是通過各種選擇器選中DOM元素可以用querySelectorAll方法模擬這個功能

　　var $ = documentquerySelectorAllbind(document);

　　這裡需要注意的是querySelectorAll方法返回的是NodeList對象它很像數組（有數字索引和length屬性）但不是數組不能使用poppush等數組特有方法如果有需要可以考慮將Nodelist對象轉為數組

　　myList = Arrayprototypeslicecall(myNodeList);

　　二DOM操作

　　DOM本身就具有很豐富的操作方法可以取代jQuery提供的操作方法

　　尾部追加DOM元素

　　// jQuery寫法
$(parent)append($(child));

　　// DOM寫法
parentappendChild(child)

　　頭部插入DOM元素

　　// jQuery寫法
$(parent)prepend($(child));

　　// DOM寫法
parentinsertBefore(child parentchildNodes[])

　　刪除DOM元素

　　// jQuery寫法
$(child)remove()

　　// DOM寫法
childparentNoderemoveChild(child)

　　三事件的監聽

　　jQuery的on方法完全可以用addEventListener模擬

　　Elementprototypeon = ElementprototypeaddEventListener;

　　為了使用方便可以在NodeList對象上也部署這個方法

　　NodeListprototypeon = function (event fn) {
[][forEach]call(this function (el) {
elon(event fn);
});
return this;
};

　　四事件的觸發

　　jQuery的trigger方法則需要單獨部署相對復雜一些

　　Elementprototypetrigger = function (type data) {
var event = documentcreateEvent(HTMLEvents);
eventinitEvent(type true true);
eventdata = data || {};
eventeventName = type;
eventtarget = this;
thisdispatchEvent(event);
return this;
};

　　在NodeList對象上也部署這個方法

　　NodeListprototypetrigger = function (event) {
[][forEach]call(this function (el) {
el[trigger](event);
});
return this;
};

　　五documentready

　　目前的最佳實踐是將JavaScript腳本文件都放在頁面底部加載這樣的話其實documentready方法（jQuery簡寫為$(function)）已經不必要了因為等到運行的時候DOM對象已經生成了

　　六attr方法

　　jQuery使用attr方法讀寫網頁元素的屬性

　　$("#picture")attr("src" "http://url/to/image");

　　DOM元素允許直接讀取屬性值寫法要簡潔許多

　　$("#picture")src = "http://url/to/image";

　　需要注意input元素的thisvalue返回的是輸入框中的值鏈接元素的thishref返回的是絕對URL如果需要用到這兩個網頁 元素的屬性准確值可以用thisgetAttribute(value)和thisgetAttibute(href)

　　七addClass方法

　　jQuery的addClass方法用於為DOM元素添加一個class

　　$(body)addClass(hasJS);

　　DOM元素本身有一個可讀寫的className屬性可以用來操作class

　　documentbodyclassName = hasJS;

　　// or

　　documentbodyclassName += hasJS;

　　HTML 還提供一個classList對象功能更強大（IE 不支持）

　　documentbodyclassListadd(hasJS);

　　documentbodyclassListremove(hasJS);

　　documentbodyclassListtoggle(hasJS);

　　documentbodyclassListcontains(hasJS);

　　八CSS

　　jQuery的css方法用來設置網頁元素的樣式

　　$(node)css( "color" "red" );

　　DOM元素有一個style屬性可以直接操作

　　elementstylecolor = "red";;

　　// or

　　elementstylecssText += color:red;

　　九數據儲存

　　jQuery對象可以儲存數據

　　$("body")data("foo" );

　　HTML 有一個dataset對象也有類似的功能（IE 不支持）不過只能保存字符串

　　elementdatasetuser = JSONstringify(user);

　　elementdatasetscore = score;

　　十Ajax

　　jQuery的Ajax方法用於異步操作

　　$ajax({
type: "POST"
url: "somephp"
data: { name: "John" location: "Boston" }
})done(function( msg ) {
alert( "Data Saved: " + msg );
});

　　我們可以定義一個request函數模擬Ajax方法

　　function request(type url opts callback) {

　　var xhr = new XMLHttpRequest();

　　if (typeof opts === function) {
callback = opts;
opts = null;
}

　　xhropen(type url);

　　var fd = new FormData();

　　if (type === POST && opts) {
for (var key in opts) {
fdappend(key JSONstringify(opts[key]));
}
}

　　xhronload = function () {
callback(JSONparse(xhrresponse));
};

　　xhrsend(opts ? fd : null);

　　}

　　然後基於request函數模擬jQuery的get和post方法

　　var get = requestbind(this GET);

　　var post = requestbind(this POST);

　　十一動畫

　　jQuery的animate方法用於生成動畫效果

　　$fooanimate(slow { x: +=px })

　　jQuery的動畫效果很大部分基於DOM但是目前CSS 的動畫遠比DOM強大所以可以把動畫效果寫進CSS然後通過操作DOM元素的class來展示動畫

　　fooclassListadd(animate)

　　如果需要對動畫使用回調函數CSS 也定義了相應的事件

　　eladdEventListener("webkitTransitionEnd" transitionEnded);

　　eladdEventListener("transitionend" transitionEnded);

　　十二替代方案

　　由於jQuery體積過大替代方案層出不窮

　　其中最有名的是zeptojs它的設計目標是以最小的體積做到最大兼容jQuery的APIzeptojs 版的原始大小是KB優化後是KBgzip壓縮後為KB

　　如果不求最大兼容只希望模擬jQuery的基本功能那麼minjs優化後只有字節而dolla優化後是KB

　　此外jQuery本身采用模塊設計可以只選擇使用自己需要的模塊具體做法參見它的github網站或者使用專用的Web界面

　　十三參考鏈接

　　 Remy SharpI know jQuery Now what?
HemanthHMPower of Vanilla JS
Burke Holland Things You Should Stop Doing With jQuery

　　（完）

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20562.html