IT工程師數位筆記本

北京的夕陽，伴隨淡淡的霾殤。從寫字樓望去，光線是那么昏黃。沒有孤雁，也沒有霞光，遙想當年，還是 jQuery 獨霸一方。那時的我們，寫程序都習慣了使用 $，至少在對美元符號的喜愛上，與 PHP 達成了一致。

當然，我并不討論語言，我只說前端。

在 React 大行其道的如今，很少再看到 jQuery 的身影，是它離開了我們嗎，還是我們選擇了不挽留。總之，我們返璞歸真，重新寫起了原生的 JavaScript，這無疑是原教主義者們的勝利并且值得慶祝的時代。

使用 jQuery，對于 DOM 操作毫不費力。沒了 jQuery，好多小伙伴像斷臂楊過，生活只能靠姑姑處理。倒不是說原生不能處理，只是方法很繁瑣：

• document.getElementById
• document.getElementsByClass
• document.getElementsByName
• document.getElementsByTagName

方法都很全，像牙科醫生的工具包。
好在后來又加上了類 jQuery 的選擇方式，

• document.querySelector
• document.querySelectorAll

那這樣呢我們又能愉快地使用單一的方法進行多種類型的 DOM 選擇了。

即使這樣，還是給我們留下了一些不爽，那就是名字太長。大家應該都知道電影里反派的統一死法吧————死于話多。所以本著能省則省，能少敲幾個字母就絕不多敲的原則，我們很是需要對這些方法進行一次包裝，或者說取個別名。對，最好就用熟悉的 $ 。

于是我們說干就干，在不到四分之一柱香的時間，我們擼出了如下代碼：

var $ = document.querySelectorAll;

以及測試代碼：

console.debug($('body'));

通過只有少數人才知道的快捷鍵組合 ⌘+⌥+j，我們嫻熟地喚出了瀏覽器控制臺進行測試。

但是測試之后，我們開始懷疑人生。這便是本文存在的意義。它幫妳撥開云霧見日升，擁有不再懷疑的人生。

這里報錯的原因是 querySelectorAll 所需的執行上下文必需是 document，而我們賦值到 $ 調用后上下文變成了全局 window。

明白了這個道理后，我們再花不到四分之一柱香的時間，就改寫了之前的版本，釋出了正確的版本，這個版本里面，我們用正確的姿勢去 alias。

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

然后我們再測試，本來這次測試是沒有必要的，至少應該像一個信心滿滿的程序員那樣去喝杯咖啡了。

對于 querSelector 同理，它的上下文也是 document。

為了使用方便，我們可以將其他一系列的 DOM 選擇方法都給上簡寫。

var query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);

需要注意的地方是，這些方法返回的要么是單個 Node 節點，要么是 NodeList 而 NodeLis 是類數組的對象，但并不是真正的數組，所以拿到之后不能直接使用 map,forEach 等方法。

正確的操作姿勢應該是：

Array.prototype.map.call(document.querySelectorAll('button'),function(element,index){
    element.onclick = function(){
    }
})

相關鏈接

• https://stackoverflow.com/questions/13383886/making-a-short-alias-for-document-queryselectorall