イベントを使用した分離コンポーネント間の通信
相互に作用する小さな(> 50)小さなWebComponentsがたくさんあるWebアプリがあります。 すべてを切り離しておくために、原則として、どのコンポーネントも別のコンポーネントを直接参照できないようにしています。代わりに、コンポーネントはイベントを発生させ、(「メイン」アプリ内で)配線されて、別のコンポーネントのメソッドを呼び出します。 時間が経つにつれ、追加されるコンポーネントが増え、「メイン」のアプリファイルには次のようなコードチャンクが散らばっています。 buttonsToolbar.addEventListener('request-toggle-contact-form-modal', () => { contactForm.toggle() }) buttonsToolbar.addEventListener('request-toggle-bug-reporter-modal', () => { bugReporter.toggle() }) // ... etc これを改善するために、同様の機能をグループ化し、にClass関連性のある名前を付け、インスタンス化するときに参加要素を渡し、内の「配線」を次のClassように処理します。 class Contact { constructor(contactForm, bugReporter, buttonsToolbar) { this.contactForm = contactForm this.bugReporterForm = bugReporterForm this.buttonsToolbar = buttonsToolbar this.buttonsToolbar .addEventListener('request-toggle-contact-form-modal', () => { this.toggleContactForm() }) this.buttonsToolbar .addEventListener('request-toggle-bug-reporter-modal', () => { this.toggleBugReporterForm() }) …