时间戳

首页 > 解决方案 > 我可以链接不返回 this 的方法吗？

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

问题描述

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

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



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

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

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

标签： javascriptoop

解决方案

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

根据您的评论，这里有 2 个包装器的示例，它们扩展了节点集合的行为和一个允许链接“add”方法的节点。

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>

推荐阅读