正确地缩写 document.querySelector

内容简介：正确地缩写 document.querySelector

北京的夕阳，伴随淡淡的霾殇。从写字楼望去，光线是那么昏黄。没有孤雁，也没有霞光，遥想当年，还是 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(){
    }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。