制作了document.querySelectorAll一个简短的别名(Making a short

2019-07-03 20:13发布

站内文章 / 移动开发

97 0

戒情不戒烟

女 | 书童

私信

我要运行document.querySelectorAll（）了一大堆，想简写别名它。

var queryAll = document.querySelectorAll

queryAll('body')
TypeError: Illegal invocation

不工作。鉴于：

document.querySelectorAll('body')

仍然如此。我怎样才能让别名工作？

Answer 1:

这似乎工作：

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

bind返回到基准querySelectorAll功能，改变“这个”的querySelectorAll方法内，在文档对象的上下文。

绑定功能只在IE9 +支持（和所有其他浏览器） - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

更新：事实上，你可以创建快捷方式的整个范围的文件的方法是这样的：

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);

Answer 2:

JavaScript解释器抛出一个错误，因为querySelectorAll()应在文件上下文中调用。

当你试图调用抛出同样的错误console.log()别名。

因此，你需要用这样的：

 function x(selector) {
     return document.querySelectorAll(selector);
 }

Answer 3:

这工作，你需要调用使用别名call()或apply()与适当的上下文。

func.call(context, arg1, arg2, ...) 
func.apply(context, [args]) 

var x = document.querySelectorAll;
x.call(document, 'body');
x.apply(document, ['body']);

Answer 4:

我的解决方案包括以下四个用例：

document.querySelector（...）
document.querySelectorAll（...）
element.querySelector（...）
element.querySelectorAll（...）

代码：

let doc=document,
    qsa=(s,o=doc)=>o.querySelectorAll(s),
    qs=(s,o=doc)=>o.querySelector(s);

在参数方面，选择器s是必需的，但容器元件对象o是可选的。

用法：

qs("div")查询用于第一格整个文档，返回该元素
qsa("div")查询用于所有div整个文档，则返回所有那些元件的一个节点列表
qs("div", myContainer) ：只用于第一格的myContainer中元件内的查询，返回该元素
qsa("div", myContainer) ：只为所有div的myContainer中元件内的查询，返回所有那些元件的一个节点列表

为了使代码略短（但不是很有效），在qs代码可以写成如下：

let qs=(s,o=doc)=>qsa(s,o)[0];

上面的代码使用ES6特征（ let ，箭头功能和默认参数值）。一个ES5相当于是：

var doc=document,
    qsa=function(s,o){return(o||doc).querySelectorAll(s);},
    qs=function(s,o){return(o||doc).querySelector(s);};

或等效的短，但效率较低ES5版本的qs ：

var qs=function(s,o){return qsa(s,o)[0];};

下面是一个工作演示。为了确保它适用于所有的浏览器，它采用了ES5的版本，但如果你打算使用这种想法，记住ES6版本更短：

 var doc = document; var qs=function(s,o){return(o||doc).querySelector(s);}, qsa=function(s,o){return(o||doc).querySelectorAll(s);} var show=function(s){doc.body.appendChild(doc.createElement("p")).innerHTML=s;} // ____demo____ _____long equivalent______ __check return___ _expect__ // | | | | | | | | let one = qs("div"); /* doc.querySelector ("#one") */ show(one .id ); // "one" let oneN = qs("div",one); /* one.querySelector ("div") */ show(oneN .id ); // "oneNested" let many = qsa("div"); /* doc.querySelectorAll("div") */ show(many .length); // 3 let manyN = qsa("div",one); /* one.querySelectorAll("div") */ show(manyN.length); // 2

 <h3>Expecting "one", "oneNested", 3 and 2...</h3> <div id="one"> <div id="oneNested"></div> <div></div> </div>

Answer 5:

通常的回答是用$和$$为querySelector和querySelectorAll 。这个别名模仿jQuery的一个。

例：

 $ = document.querySelector.bind(document) $$ = document.querySelectorAll.bind(document) $('div').style.color = 'blue' $$('div').forEach(div => div.style.background = 'orange')

 div { margin: 2px; }

 <div> test </div> <section> <div> hello </div> <div> foo </div> </section>

Answer 6:

我把@大卫穆勒的方法和一个内衬它使用Lambda

let $ = (selector) => document.querySelector(selector);
let $all = (selector) => document.querySelectorAll(selector);

例：

$('body');
// <body>...</body>

Answer 7:

function x(expr)
{
    return document.querySelectorAll(expr);
}

Answer 8:

Here is my take on it. If the selector has multiple matches, return like querySelectorAll. If ony one match is found return like querySelector.

function $(selector) {
  let all = document.querySelectorAll(selector);
  if(all.length == 1) return all[0];
  return all;
}

let one = $('#my-single-element');
let many = $('#multiple-elements li');

2019 update

Today I made a new take on the problem. In this version you can also use a base like this:

let base = document.querySelectorAll('ul');

$$('li'); // All li
$$('li', base); // All li within ul

Functions

function $(selector, base = null) {
  base = (base === null) ? document : base;
  return base.querySelector(selector);
}

function $$(selector, base = null) {
  base = (base === null) ? document : base;
  return base.querySelectorAll(selector);
}

文章来源: Making a short alias for document.querySelectorAll