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

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

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

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

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

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

一、選取 DOM 元素

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

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

二、DOM 操作

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

尾部追加 DOM 元素。

頭部插入 DOM 元素。

刪除 DOM 元素。

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

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

為了使用方便，可以在 NodeList 對(duì)象上也部署這個(gè)方法。

四、事件的觸發(fā)

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

在NodeList對(duì)象上也部署這個(gè)方法。

五、document.ready

目前的最佳實(shí)踐，是將 JavaScript 腳本文件都放在頁(yè)面底部加載。這樣的話，其實(shí) document.ready 方法（jQuery 簡(jiǎn)寫(xiě)為$(function)）已經(jīng)不必要了，因?yàn)榈鹊竭\(yùn)行的時(shí)候，DOM 對(duì)象已經(jīng)生成了。

六、attr 方法

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

DOM 元素允許直接讀取屬性值，寫(xiě)法要簡(jiǎn)潔許多。

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

七、addClass 方法

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

DOM 元素本身有一個(gè)可讀寫(xiě)的 className 屬性，可以用來(lái)操作 class。

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

八、CSS

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

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

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

jQuery 對(duì)象可以?xún)?chǔ)存數(shù)據(jù)。

HTML 5 有一個(gè) dataset 對(duì)象，也有類(lèi)似的功能（IE 10 不支持），不過(guò)只能保存字符串。

十、Ajax

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

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

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

jQuery 的 animate 方法，用于生成動(dòng)畫(huà)效果。

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

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

十二、替代方案

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

其中，最有名的是 zepto.js。它的設(shè)計(jì)目標(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è)計(jì)，可以只選擇使用自己需要的模塊。具體做法參見(jiàn)它的 GitHub 網(wǎng)站，或者使用專(zhuān)用的 Web 界面。

十三、參考鏈接

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

（完）