<p>北京的夕阳,伴随淡淡的霾殇。从写字楼望去,光线是那么昏黄。没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方。那时的我们,写程序都习惯了使用 <code>$</code>,至少在对美元符号的喜爱上,与 PHP 达成了一致。</p>

当然,我并不讨论语言,我只说前端。

在 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(){
}
})

相关链接

正确地缩写 document.querySelector的更多相关文章

  1. 正确的缩写document。querySelector

    北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...

  2. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  3. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  4. 实现兼容document.querySelector的方法

    var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展: var element = null; if(document.queryS ...

  5. document.querySelector获取不到html标签对象实例的原因

    官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...

  6. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  7. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  8. document.querySelector()与document.querySelectorAll()

      document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...

  9. document.getElementById & document.querySelector

    document.getElementById & document.querySelector https://developer.mozilla.org/en-US/docs/Web/AP ...

随机推荐

  1. [内存管理]管理图解v0.1 v0.2 v0.3

    内存管理图解v0.1 内存管理图解v0.2 内存管理图解v0.3 

  2. springcloud(一):大话Spring Cloud

    研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...

  3. Omi树组件omi-tree编写指南

    Omi框架能够以少量的代码声明式地编写可拖拽移动节点的树形组件. 通常树组件能够考验UI框架的健壮性,因为需要使用到UI框架的如下特性: 组件嵌套 组件传值 组件批量传值 组件依赖自身递归嵌套(nes ...

  4. app性能测试【通过loadrunner录制】

    随着智能手机近年来的快速增长,从游戏娱乐到移动办公的各式各样的手机APP软件渗透到我们的生活中,对于大型的手机APP测试不仅要关注它的功能性.易用性还要关注它的性能,最近发现LoadRunner12可 ...

  5. druid抛出的异常------javax.management.InstanceAlreadyExistsException引发的一系列探索

    最近项目中有个定时任务的需求,定时检查mysql数据与etcd数据的一致性,具体实现细节就不说了,今天要说的就是实现过程中遇到了druid抛出的异常,以及解决的过程 异常 异常详细信息 五月 05, ...

  6. IOS(一) 基础控件的介绍以及使用

    IOS的界面的制作,相对于Android来说 简洁了很多,虽然创建布局的方式都是两种(代码创建.布局文件) 但是Android中的xml布局文件在某些方面也属于代码创建,因为自己使用到得每一个属性 都 ...

  7. A*算法的理解与简单实现

    基本定义 一种寻路算法,特点是:启发式的,效率高,基本思路比较简单. 用途 寻路.在指定的地图上,考虑到地图上的移动代价,找到最优的路径. 核心概念 开表,闭表,估值函数. 开表 开表,记录了当前需要 ...

  8. [刷题]算法竞赛入门经典(第2版) 4-10/UVa815 - Flooded!

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa815 - Flooded! #include<iostream ...

  9. 求序列的和,杭电0j-2058

    原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=2058 [Problem Description] Given a sequence 1,2,3,... ...

  10. 使用Fiddler进行http抓包和调试

    本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...