首頁 > 新聞中心 > 網站如何做到完全不需要jQuery?
網站如何做到完全不需要jQuery?
2013-05-19

jQuery 是現在最流行的 JavaScript 工具庫。


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

 


雖然 jQuery 如此受歡迎,但是它臃腫的體積也讓人頭痛不已。jQuery 2.0 的原始大小為 235KB,優化后為 81KB;如果是支持 IE6、7、8 的 jQuery 1.8.3,原始大小為 261KB,優化后為 91KB。


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


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


下面就探討如何用 JavaScript 標準語法,取代 jQuery 的一些主要功能,做到 jQuery-free。



一、選取 DOM 元素

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

var $ = document.querySelectorAll.bind (document);

這里需要注意的是,querySelectorAll 方法返回的是 NodeList 對象,它很像數組(有數字索引和 length 屬性),但不是數組,不能使用 pop、push 等數組特有方法。如果有需要,可以考慮將 Nodelist 對象轉為數組。

myList = Array.prototype.slice.call (myNodeList);


二、DOM 操作

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

尾部追加 DOM 元素。

// jQuery 寫法

$(parent) .append ($(child));

// DOM 寫法

parent.appendChild (child)

頭部插入 DOM 元素。

// jQuery 寫法

$(parent) .prepend ($(child));

// DOM 寫法

parent.insertBefore (child, parent.childNodes[0])

刪除 DOM 元素。

// jQuery 寫法

$(child) .remove ()

// DOM 寫法

child.parentNode.removeChild (child)


三、事件的監聽

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

Element.prototype.on = Element.prototype.addEventListener;

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

NodeList.prototype.on = function (event, fn) {

[]['forEach'].call (this, function (el) {

el.on (event, fn);

});

return this;

};


四、事件的觸發

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

Element.prototype.trigger = function (type, data) {

var event = document.createEvent ('HTMLEvents');

event.initEvent (type, true, true);

event.data = data {};

event.eventName = type;

event.target = this;

this.dispatchEvent (event);

return this;

};

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

NodeList.prototype.trigger = function (event) {

[]['forEach'].call (this, function (el) {

el['trigger'](event);

});

return this;

};


五、document.ready

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


六、attr 方法

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

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

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

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

需要注意,input 元素的 this.value 返回的是輸入框中的值,鏈接元素的 this.href 返回的是絕對 URL。如果需要用到這兩個網頁元素的屬性準確值,可以用 this.getAttribute (‘value’)和 this.getAttibute (‘href’)。


七、addClass 方法

jQuery 的 addClass 方法,用于為 DOM 元素添加一個 class。

$('body') .addClass ('hasJS');

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

document.body.className = 'hasJS';

// or

document.body.className += ' hasJS';

HTML 5 還提供一個 classList 對象,功能更強大(IE 9 不支持)。

document.body.classList.add ('hasJS');

document.body.classList.remove ('hasJS');

document.body.classList.toggle ('hasJS');

document.body.classList.contains ('hasJS');


八、CSS

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

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

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

element.style.color = "red";;

// or

element.style.cssText += 'color:red';


九、數據儲存

jQuery 對象可以儲存數據。

$("body") .data ("foo", 52);

HTML 5 有一個 dataset 對象,也有類似的功能(IE 10 不支持),不過只能保存字符串。

element.dataset.user = JSON.stringify (user);

element.dataset.score = score;


十、Ajax

jQuery 的 Ajax 方法,用于異步操作。

$.ajax ({

type: "POST",

url: "some.php",

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;

}

xhr.open (type, url);

var fd = new FormData ();

if (type === 'POST' && opts) {

for (var key in opts) {

fd.append (key, JSON.stringify (opts[key]));

}

}

xhr.onload = function () {

callback (JSON.parse (xhr.response));

};

xhr.send (opts ? fd : null);

}

然后,基于 request 函數,模擬 jQuery 的 get 和 post 方法。

var get = request.bind (this, 'GET');

var post = request.bind (this, 'POST');


十一、動畫

jQuery 的 animate 方法,用于生成動畫效果。

$foo.animate ('slow', { x: '+=10px' });

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

foo.classList.add ('animate');

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

el.addEventListener ("webkitTransitionEnd", transitionEnded);

el.addEventListener ("transitionend", transitionEnded);


十二、替代方案

由于 jQuery 體積過大,替代方案層出不窮。

 

其中,最有名的是 zepto.js。它的設計目標是以最小的體積,做到最大兼容 jQuery 的 API。zepto.js 1.0 版的原始大小是 55KB,優化后是 29KB,gzip 壓縮后為 10KB。

 

如果不求最大兼容,只希望模擬 jQuery 的基本功能,那么,min.js 優化后只有 200 字節,而 dolla 優化后是 1.7KB。

 

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

精准一波中特 开心棋牌975官方版下载 江西时时彩3星和值 北京快3开奖快结果 湖南快乐十分动物遗漏 69棋牌游戏官网 老友棋牌官方下载 成人之美女麻将小游戏 河北麻将规则 河南快3 一分彩开奖网 开元棋牌游戏平台 欢聚麻将上下分代理 大圣捕鱼免费版下载 北京十一学校 如何进去 河北快3好肝6059。vip pc蛋蛋网站源码破解