Я создаю пользовательские компоненты пользовательского интерфейса, используя классы ES6, которые делают что-то вроде этого:
class Dropdown {
constructor(dropdown) {
this.dropdown = dropdown;
this._init();
}
_init() {
//init component
}
setValue(val) {
//"public" method I want to use from another class
}
}
И при загрузке страницы я запускаю компоненты следующим образом:
let dropdown = document.querySelectorAll(".dropdown");
if (dropdown) {
Array.prototype.forEach.call(dropdown, (element) => {
let DropDownEl = new Dropdown(element);
});
}
Но теперь мне нужно получить метод одного из этих классов из другого. В этом случае мне нужно получить доступ к методу, чтобы установить значение раскрывающегося списка на основе параметра URL, поэтому я хотел бы сделать что-то вроде:
class SearchPage {
//SearchPage is a class and a DOM element with different components (like the dropdown) that I use as filters. This class will listen to the dispached events
//from these filters to make the Ajax requests.
constructor() {
this._page = document.querySelector(".search-page")
let dropdown = this._page.querySelector(".dropdown);
//Previously I import the class into the file
this.dropdown = new Dropdown(dropdown);
}
setValues(val) {
this.dropdown.setValue(val);
//Set other components' values...
}
}
Но когда я создаю этот экземпляр, на страницу добавляется другое раскрывающееся меню, чего я не хочу.
Я думаю, что альтернативой является создание компонентов таким образом, внутри других, а не как в первом фрагменте кода. Правильно ли это? Должен ли я создать другой класс Dropdown, который наследуется от исходного?
Простым решением является сохранение экземпляра Dropdown
на элементе, чтобы избежать его повторного создания:
class Dropdown {
constructor(element) {
if (element.dropdown instanceof Dropdown)
return element.dropdown;
this.element = element;
element.dropdown = this;
//init component
}
…
}
element
. В SearchPage
есть dropdown
список, в dropdown
Dropdown
есть element
..., а не другой dropdown
список.
let DropDownEl
и вызывает их открытые методы?