Javascript组件中的事件监听器/在文件之间通信

Question

我正试图将我的代码组织成组件/模块，我正在努力理解如何处理事件侦听器和/或JS文件之间的通信。我将用一个简单的例子来解释:

在这个假设中，app.js导入了所有其他js文件组件。在app.js中，我在nav.js中调用一个函数来渲染我的导航到DOM，并为单个按钮添加事件侦听器。

当按钮被点击时，我的事件处理程序在nav.js中拾取它，我想以某种方式与app.js通信，并告诉它调用pageA.js中的函数来渲染页面。

我不确定这是否是正确的方法，或者如果我错过了一个关键的概念来让这个工作。如有任何建议，我将不胜感激。

index.js

import Nav from './nav.mjs';
import PageA from './pageA.mjs';
export default class App {
constructor() {
this.nav = new Nav();
this.pageA = new PageA();
this.nav.renderNav();
}
}

nav.js

export default class Nav {
constructor() {
}
renderNav(){
let button = document.createElement("button");
button.innerHTML = "Page A";
document.body.appendChild(button);
button.addEventListener ("click", function() {
// How do I call renderPageA() in pageA.js?
});
}
}

pageA.js

export default class PageA {
constructor() {
}
renderPageA(){
let pageDiv = document.createElement('div');
document.body.appendChild(pageDiv);
}
}

Answer 1

您可以将pageA实例作为Navs构造函数的参数传递。

//Nav constructor
constructor(pageA){
this.pageA = pageA
}
//Add this to the event listener's callback:
this.pageA.renderPageA()
//index.js
this.nav = new Nav(pageA)

请注意，您必须在nav之前实例化pageA才能使其工作。