Можно ли связать методы, которые не возвращают это?

Question

Я начинаю с ОО в JavaScript, и у меня есть класс со следующими методами:

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



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

Первый метод анализирует, сколько элементов указанного типа существует в DOM, и возвращает числовой результат, а второй работает как querySelector() с некоторыми отличиями.

Я бы хотел связать эти методы с другими методами. Но, насколько я знаю, методы должны возвращать this для цепочки. Как я могу связать эти методы?

Answer 1

Как отмечено в комментариях, похоже, что вы хотите создать еще одну вспомогательную программу DOM, похожую на jQuery. Вероятно, это не лучшая идея.

На основании вашего комментария приведен пример двух оболочек, которые расширяют поведение коллекции узлов и узла, который позволяет связывать метод "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>

Answer 2

Вы можете связывать методы всякий раз, когда метод возвращает объект, у которого есть методы. Например, вы можете написать:

str = yourObj.count(".classname").toString();
yourObj.get("#table tr", 3).appendChild(cell);

Вам нужно использовать return this;, только если вы хотите объединить методы, которые применяются к исходному объекту. Обычно это делается только с помощью методов, которые модифицируют объект; он позволяет вам выполнять несколько модификаций с помощью свободного интерфейса, например:

yourObj.set("foo", "bar").set("baz", "quux");

Метод set() должен выполнить модификацию, а затем return this;.

Если метод используется для возврата информации, это то, что он должен вернуть вместо this.