jQuery 是現(xiàn)在最流行的 JavaScript 工具庫。

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

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

這樣的體積，即使是寬帶環(huán)境，完全加載也需要 1 秒或更長，更不要說移動設(shè)備了。這意味著，如果你使用了 jQuery，用戶至少延遲 1 秒，才能看到網(wǎng)頁效果?？紤]到本質(zhì)上，jQuery 只是一個操作 DOM 的工具，我們不僅要問：如果只是為了幾個網(wǎng)頁特效，是否有必要動用這么大的庫？

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

下面就探討如何用 JavaScript 標(biāo)準(zhǔn)語法，取代 jQuery 的一些主要功能，做到 jQuery-free。

一、選取 DOM 元素

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

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

二、DOM 操作

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

尾部追加 DOM 元素。

頭部插入 DOM 元素。

刪除 DOM 元素。

三、事件的監(jiān)聽

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

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

四、事件的觸發(fā)

jQuery 的 trigger 方法則需要單獨部署，相對復(fù)雜一些。

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

五、document.ready

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

六、attr 方法

jQuery 使用 attr 方法，讀寫網(wǎng)頁元素的屬性。

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

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

七、addClass 方法

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

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

HTML 5 還提供一個 classList 對象，功能更強(qiáng)大（IE 9 不支持）。

八、CSS

jQuery 的 css 方法，用來設(shè)置網(wǎng)頁元素的樣式。

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

九、數(shù)據(jù)儲存

jQuery 對象可以儲存數(shù)據(jù)。

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

十、Ajax

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

我們可以定義一個 request 函數(shù)，模擬 Ajax 方法。

然后，基于 request 函數(shù)，模擬 jQuery 的 get 和 post 方法。

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

jQuery 的動畫效果，很大部分基于 DOM。但是目前，CSS 3 的動畫遠(yuǎn)比 DOM 強(qiáng)大，所以可以把動畫效果寫進(jìn) CSS，然后通過操作 DOM 元素的 class，來展示動畫。

如果需要對動畫使用回調(diào)函數(shù)，CSS 3 也定義了相應(yīng)的事件。

十二、替代方案

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

其中，最有名的是 zepto.js。它的設(shè)計目標(biāo)是以最小的體積，做到最大兼容 jQuery 的 API。zepto.js 1.0 版的原始大小是 55KB，優(yōu)化后是 29KB，gzip 壓縮后為 10KB。

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

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

十三、參考鏈接

- Remy Sharp，I know jQuery. Now what?
- Hemanth.HM，Power of Vanilla JS
- Burke Holland，5 Things You Should Stop Doing With jQuery

（完）