在 Plain Vanilla Javascript 中创建 .hide()

Question

完全避免使用 jQuery，我今天开始尝试让自己变得像这样：

$('#myDiv').hide();

目标是它将适用.style.display = 'none'于#myDiv.

因此，我们了解到以下内容是一个与 jQuery 稍微相似的选择器：

var $ = s => document.querySelectorAll.bind(document)(s).length > 1 ?
  document.querySelectorAll.bind(document)(s) : document.querySelector.bind(document)(s);

使用它时要小心，因为它可以返回多个元素，您可能需要使用其中的.forEach(function(el,i){el.doSomething();});语法。

所以，我尝试创建一个简单的$(...).hide()函数，如下所示：

$.__proto__.hide = function(){this.forEach(function(el,i){el.style.display='none';});};

不幸的是，__proto__现在已被弃用，即使您忽略这一点，除非您执行以下操作，否则上述内容也不会起作用：

$('#myDIV').__proto__.hide = function(){this.forEach(function(el,i){el.style.display='none';});};

使用普通 Javascript 通过函数扩展我的$对象的技术是什么？.hide()

Answer 1

这里的主要问题是您直接返回querySelectororquerySelectorAll结果。您可以将其包装在您自己的类中，您可以使用方法轻松扩展该类。class ElementsHelper {  constructor(elements) {    this.elements = elements;  }  // helper to simplify iterating `this.elements` and returning `this`  forEach(fn) {    this.elements.forEach(fn);    return this;  }  hide() {    return this.forEach(element => element.style.display = "none");  }  click(fn) {    return this.forEach(element => element.addEventListener("click", fn));  }}function $(selector) {  return new ElementsHelper(document.querySelectorAll(selector));}通过上述操作，您现在可以执行以下操作：$('#myDiv').hide();

Answer 2

你基本上有两个选择：像 jQuery 一样使用你自己的对象，或者扩展内置原型。返回每个单独的结果对象时对其进行扩展我可能会使用方法#1，也许是扩展Array（或通过组合使用数组）。你似乎更喜欢方法#2。通常不建议这样做，因为一旦开始组合来自多个位置的脚本，就会遇到潜在的冲突。但在应用程序（而不是库）内，这不一定不合理。在您的情况下，如果您的$函数返回 的结果querySelectorAll，它将返回 a NodeList，并且您可以扩展NodeList.prototype。每当扩展原型时，始终使用Object.defineProperty（或类似的）来定义不可枚举的属性。例如：Object.defineProperty(NodeList.prototype, "hide", {    value() {        this.forEach(/*...*/);        return this;    },    writable: true,    configurable: true});实例：Object.defineProperty(NodeList.prototype, "hide", {    value() {        // This isn't a great "hide", it's just for        // the purposes of showing the plumbing        this.forEach(el => el.style.display = "none");        return this;    },    writable: true,    configurable: true});const $ = selector => document.querySelectorAll(selector);setTimeout(() => {    $(".a").hide();    console.log("Hid .a elements");}, 800);<div class="a">a</div><div class="b">b</div><div class="c">c</div>不幸的是，__proto__现在已被弃用这是真的，但Object.getPrototypeOf不是，只是__proto__访问器属性（它只是为了向后兼容而添加到规范中）。