javascript - 我可以链接不返回这个的方法吗？

Question

我从 JavaScript 中的 OO 开始，我有一个包含以下方法的类:

 count(element) {
        return document.querySelectorAll(element).length;
}



 get(element, occurence) {
        return document.querySelectorAll(element)[occurence];
 }

第一种方法分析DOM中存在多少个指定类型的元素并返回数值结果，第二种方法用作querySelector()，但有一些区别。

我想将这些方法与其他方法链接起来。但据我所知，方法必须返回 this 才能被链接。我如何链接这些方法？

Answer 1

正如评论中所指出的，您似乎想要构建另一个类似于 jQuery 的 DOM 实用程序助手。这可能不是最好的主意。

根据您的评论，这里有一个扩展节点集合行为的 2 个包装器的示例，以及一个允许链接“添加”方法的节点。

class MyDOMNodesWrapper {
  constructor(elementSelector) {
    this.set(elementSelector)
  }
  set(elementSelector) {
    this.nodes = document.querySelectorAll(elementSelector)
    return this
  }
  get(elementSelector, occurence) {
    return new MyDOMNodeWrapper(this.set(elementSelector).nodes[occurence])
  }
}

class MyDOMNodeWrapper {
  constructor(node) {
    this.node = node
  }
  add(elementType) {
    return new MyDOMNodeWrapper(this.node.appendChild(document.createElement(elementType)))
  }
}

const DOM = new MyDOMNodesWrapper
DOM.get('div', 5).add('p').node.textContent = "hello"
DOM.get('div', 0).add('div').add("div").add("h1").node.textContent = "Deeply chained"
DOM.get('div > p', 0).node.style.border = "1px solid red"

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>