正確地縮寫 document.querySelector
原文：https://www.cnblogs.com/Wayou/p/7043478.html
北京的夕陽，伴隨淡淡的霾殤。從寫字樓望去，光線是那麼昏黃。沒有孤雁，也沒有霞光，遙想當年，還是 jQuery 獨霸一方。那時的我們，寫程式都習慣了使用 $，至少在對美元符號的喜愛上，與 PHP 達成了一致。
當然，我並不討論語言，我只說前端。
在 React 大行其道的如今，很少再看到 jQuery 的身影，是它離開了我們嗎，還是我們選擇了不挽留。總之，我們返璞歸真，重新寫起了原生的 JavaScript，這無疑是原教主義者們的勝利並且值得慶祝的時代。
使用 jQuery，對於 DOM 操作毫不費力。沒了 jQuery，好多小夥伴像斷臂楊過，生活只能靠姑姑處理。倒不是說原生不能處理，只是方法很繁瑣：
document.getElementByIddocument.getElementsByClassdocument.getElementsByNamedocument.getElementsByTagName
方法都很全，像牙科醫生的工具包。
好在後來又加上了類 jQuery 的選擇方式，
document.querySelectordocument.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(){
}
})