Chúng tôi đã có một Ứng dụng web nơi chúng tôi có rất nhiều (> 50) ít WebComponents tương tác với nhau.
Để giữ mọi thứ tách rời, chúng tôi có một quy tắc là không thành phần nào có thể trực tiếp tham chiếu đến cái khác. Thay vào đó, các thành phần kích hoạt các sự kiện mà sau đó (trong ứng dụng "chính") có dây để gọi các phương thức của thành phần khác.
Khi thời gian trôi qua, ngày càng có nhiều thành phần được thêm vào và tệp ứng dụng "chính" trở nên ngổn ngang với các đoạn mã trông như thế này:
buttonsToolbar.addEventListener('request-toggle-contact-form-modal', () => {
contactForm.toggle()
})
buttonsToolbar.addEventListener('request-toggle-bug-reporter-modal', () => {
bugReporter.toggle()
})
// ... etcĐể cải thiện điều này, chúng tôi đã nhóm chức năng tương tự lại với nhau, trong một Class, đặt tên cho nó một cái gì đó có liên quan, vượt qua các yếu tố tham gia khi khởi tạo và xử lý "hệ thống dây điện" trong Class, như vậy:
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()
})
}
toggleContactForm() {
this.contactForm.toggle()
}
toggleBugReporterForm() {
this.bugReporterForm.toggle()
}
}và chúng tôi khởi tạo như vậy:
<html>
<contact-form></contact-form>
<bug-reporter></bug-reporter>
<script>
const contact = new Contact(
document.querySelector('contact-form'),
document.querySelector('bug-form')
)
</script>
</html>Tôi thực sự không thích giới thiệu các mẫu của riêng mình, đặc biệt là các mẫu không thực sự OOP-y vì tôi chỉ sử dụng Classesnhư các thùng chứa khởi tạo, vì không có từ nào tốt hơn.
Có một mẫu được xác định tốt hơn / được biết đến nhiều hơn để xử lý loại nhiệm vụ này mà tôi đang thiếu không?