Как я могу вызвать метод объекта из другого объекта?

1

Я создаю пользовательские компоненты пользовательского интерфейса, используя классы 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, который наследуется от исходного?

  • 0
    « При загрузке страницы я запускаю такие компоненты » - почему? Что они делают самостоятельно? Кто использует let DropDownEl и вызывает их открытые методы?
  • 0
    @ Берги Никто, на самом деле. Это способ показать пользовательский элемент, а не элемент по умолчанию. Должен ли я изменить это?
Показать ещё 1 комментарий
Теги:
ecmascript-6
oop

1 ответ

2

Простым решением является сохранение экземпляра Dropdown на элементе, чтобы избежать его повторного создания:

class Dropdown {
    constructor(element) {
        if (element.dropdown instanceof Dropdown)
            return element.dropdown;
        this.element = element;
        element.dropdown = this;

        //init component
    }
    …
}
  • 0
    Что такое «элемент» здесь? Это выпадающий список?
  • 0
    @ IsmaelOrdás Да, я переименовал его в более подходящий element . В SearchPage есть dropdown список, в dropdown Dropdown есть element ..., а не другой dropdown список.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню