如何为 anyElement.querySelector 方法创建简写

Question

可以使用以下方法为document.querySelector 创建速记

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

所以现在let a = $('a') 和let a = document.querySelector('a') 是等价的。

有没有办法为querySelector 方法本身创建简写？
IE。使let a = element.shortHand(args) 和let a = element.querySelector(args) 等同于任何（预先未知）element。

编辑：由于人们说这样做是个坏主意，所以还有另一个问题：如何制作$ $$ 选择器，就像Chrome DevTools 中的选择器一样，它接受根元素作为第二个参数?
IE。使let a = $('a',element) 和let a = element.querySelector('a') 等价。

Answer 1

这里有一些选项：

向 Element.prototype 添加方法

Element.prototype.shortHand = Element.prototype.querySelector

这个“猴子补丁”在 DOM 本身中的 Element 类，并将这个函数添加到 DOM 中的所有元素上，这只是 querySelector 函数的副本。

这非常不鼓励。这对性能不利，并且万一浏览器决定在未来添加更多与您的功能冲突的功能，这也很糟糕。但是，如果您只是在玩游戏而不发布此代码，那应该没问题。

迷你 jQuery

​​>

如果你想创建自己的迷你 jQuery，你也可以这样做：

class MiniJQuery {
  constructor(el) {
    this.el = el;
  }
  shortHand(...query) {
    return this.el.querySelector(...query);
  }
  // ... put any other functions you want to use
}
const $ = (queryOrElement) => {
  if (typeof queryOrElement === 'string') {
    return document.querySelector(queryOrElement);
  }
  return new MiniJQuery(queryOrElement);
}

// Now you can:
const a = $(element).shortHand(args);
// which is equivalent to
const a = element.querySelector(args);

这是一种更安全且没有问题的方法。我认为这不会增加太多价值，因为您只需键入稍长的方法名称，但您可以在您的类中添加更多有趣的方法以使其有价值。

代理

与上面的方法非常相似，但是您可以使用Proxy 而不是MinijQuery 类将未知方法“转发”到元素本身。这意味着$(element) 将拥有element 本身拥有的所有方法。

例子：

const handler = {
  get: function (target, prop, receiver) {
    if (prop === "shortHand") {
      return target.querySelector.bind(target);
    }
    const retVal = Reflect.get(...arguments);
    
    // Bind methods to the element.
    return typeof retVal === 'function'
      ? retVal.bind(target)
      : retVal;
  },
};

const $ = (queryOrElement) => {
  if (typeof queryOrElement === 'string') {
    return document.querySelector(queryOrElement);
  }
  // You can add all sorts of custom function handlers here.
  return new Proxy(queryOrElement, handler);
}

$('div') // gets divs
$(element).shortHand(...)
// works the same as element.querySelector
// But the HTMLElement methods still work too:
$(element).querySelector
$(element).querySelectorAll
$(element).className
// ...

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy