querySelector和querySelectorAll别名

什么是最好的不引人注目的替代方案,为querySelector和querySelectorAll两个document和两个跨浏览器别名Element

最直接的方式可能是

window.$ = function(selector){return document.querySelector(selector)}
window.$$ = function(selector){return document.querySelectorAll(selector)}

当然这不会允许链接,因为函数返回总是指的是 document

$('.parent-class').$$('.child-classes')

到目前为止,我最好的选择是

window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Element.prototype.$ = Element.prototype.querySelector;
Element.prototype.$$ = Element.prototype.querySelectorAll;

这样我们就可以做以前失败的选择器了,虽然我不确定这可能带来的不良影响,是否有人有提示/解释可以提供？

有没有人有一个很好的不引人注目的替代品？

我还使用该bind方法创建别名.

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

对于元素一,我使用一个函数,apply因此它的行为就像你称之为"VanillaJS"方式一样.

Element.prototype.$ = function() {
  return this.querySelector.apply(this, arguments);
};

Element.prototype.$$ = function() {
  return this.querySelectorAll.apply(this, arguments);
};

这是一个例子:

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

Element.prototype.$ = function() {
  return this.querySelector.apply(this, arguments);
};

Element.prototype.$$ = function() {
  return this.querySelectorAll.apply(this, arguments);
};

alert($('.foo').innerHTML);
alert('There are ' + $$('.foo').length + ' `.foo` nodes');

var parent = $('.parent');
alert(parent.$('.child').innerText);
alert('There are ' + parent.$$('.child').length + ' children');

  
  



  
It works!
  
It worked again!
  
Parent
    
Child
    
Another Child