如何從另一個對象調用對象的方法？

我創建使用ES6類做這樣的事情自定義UI組件：如何從另一個對象調用對象的方法？

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類嗎？

來源

2017-07-30 Ismael Ordás

「*當頁面加載我開始喜歡這個組件*」 - 爲什麼？他們自己做什麼？誰使用'let DropDownEl'並調用他們的公共方法？ – Bergi

@Bergi其實沒有人。這是顯示自定義元素而不是默認元素的方式。我應該改變它嗎？ –

@Bergi在他們的一個將派遣事件。 –

一個簡單的解決方案是將Dropdown實例存儲元件上，以避免重新創建它：

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

     //init component 
    } 
    … 
}

來源

2017-07-31 00:23:47 Bergi

什麼是「元素」在這裏？它是下拉菜單嗎？ –

@IsmaelOrdás是的，我將它重命名爲更合適的'element'。 'SearchPage'有一個'dropdown'，'Dropdown'有一個''element''，而不是另一個'dropdown'。 – Bergi

我仍然沒有看到它，因爲我傳遞給構造函數的是一個DOM元素。你能否提供另一個用法示例？此外，在其父對象內創建實例是一個有效的解決方案？（在這種情況下，SearchPage類）而不是在頁面加載時創建。 –

如何從另一個對象調用對象的方法？

回答

相關問題