Mẫu thiết kế trình quan sát trong JavaScript

---

Có nhiều khi một phần của ứng dụng thay đổi, các phần khác cần được cập nhật. Trong AngularJS, nếu đối tượng $scope cập nhật, một sự kiện có thể được kích hoạt để thông báo cho một thành phần khác. Mẫu người quan sát chỉ kết hợp điều đó - nếu một đối tượng được sửa đổi, nó sẽ truyền cho các đối tượng phụ thuộc rằng một thay đổi đã xảy ra.

Một ví dụ điển hình khác là kiến trúc model-view-controller (MVC); Chế độ xem cập nhật khi mô hình thay đổi. Một lợi ích là tách chế độ xem khỏi mô hình để giảm bớt dependencies .

Observer Design Pattern trên Wikipedia

Như trong biểu đồ UML, các đối tượng cần thiết là subject , observer và các đối tượng concrete thể. Chủ đề có chứa các tham chiếu đến các quan sát viên cụ thể để thông báo cho bất kỳ thay đổi nào. Đối tượng Observer là một lớp trừu tượng cho phép các quan sát viên cụ thể thực hiện phương thức thông báo.

Ta hãy xem một ví dụ AngularJS bao gồm mẫu người quan sát thông qua quản lý sự kiện.

// Controller 1 $scope.$on('nameChanged', function(event, args) {     $scope.name = args.name; });  ...  // Controller 2 $scope.userNameChanged = function(name) {     $scope.$emit('nameChanged', {name: name}); }; 

Với mẫu người quan sát, điều quan trọng là phải phân biệt đối tượng độc lập hay chủ thể .

Điều quan trọng cần lưu ý là mặc dù mẫu người quan sát mang lại nhiều ưu điểm, nhưng một trong những nhược điểm là hiệu suất giảm đáng kể khi số lượng người quan sát tăng lên. Một trong những quan sát viên khét tiếng nhất là những người theo dõi . Trong AngularJS, ta có thể xem các biến, hàm và đối tượng. Chu trình thông báo $$ chạy và thông báo cho từng người theo dõi các giá trị mới khi nào đối tượng phạm vi được sửa đổi.

Ta có thể tạo Đối tượng và Người quan sát của riêng mình trong JavaScript. Hãy xem cách này được thực hiện như thế nào:

var Subject = function() {     this.observers = [];      return {     subscribeObserver: function(observer) {         this.observers.push(observer);     },     unsubscribeObserver: function(observer) {         var index = this.observers.indexOf(observer);         if(index > -1) {         this.observers.splice(index, 1);         }     },     notifyObserver: function(observer) {         var index = this.observers.indexOf(observer);         if(index > -1) {         this.observers[index].notify(index);         }     },     notifyAllObservers: function() {         for(var i = 0; i < this.observers.length; i++){         this.observers[i].notify(i);         };     }     }; };  var Observer = function() {     return {     notify: function(index) {         console.log("Observer " + index + " is notified!");     }     } }  var subject = new Subject();  var observer1 = new Observer(); var observer2 = new Observer(); var observer3 = new Observer(); var observer4 = new Observer();  subject.subscribeObserver(observer1); subject.subscribeObserver(observer2); subject.subscribeObserver(observer3); subject.subscribeObserver(observer4);  subject.notifyObserver(observer2); // Observer 2 is notified!  subject.notifyAllObservers(); // Observer 1 is notified! // Observer 2 is notified! // Observer 3 is notified! // Observer 4 is notified! 

Theo dõi công khai

Tuy nhiên, mẫu Xuất bản / Đăng ký sử dụng kênh chủ đề / sự kiện nằm giữa đối tượng muốn nhận thông báo (người đăng ký) và đối tượng kích hoạt sự kiện (nhà xuất bản). Hệ thống sự kiện này cho phép mã xác định các sự kiện dành riêng cho ứng dụng có thể chuyển các đối số tùy chỉnh chứa các giá trị mà người đăng ký cần. Ý tưởng ở đây là tránh phụ thuộc giữa người đăng ký và nhà xuất bản.

Điều này khác với mẫu Người quan sát vì bất kỳ người đăng ký nào triển khai trình xử lý sự kiện thích hợp để đăng ký và nhận thông báo chủ đề do nhà xuất bản phát.

Nhiều nhà phát triển chọn kết hợp mẫu thiết kế xuất bản / đăng ký với trình quan sát mặc dù có sự khác biệt. Những người đăng ký trong mô hình xuất bản / đăng ký được thông báo qua một số phương tiện nhắn tin, nhưng những người quan sát được thông báo bằng cách triển khai một trình xử lý tương tự như chủ đề.

Trong AngularJS, một người đăng ký 'đăng ký' một sự kiện bằng cách sử dụng $ on ('event', callback) và một nhà xuất bản 'xuất bản' một sự kiện bằng cách sử dụng $ release ('event', args) hoặc $ broadcast ('event', args) .

---

---

Các tin liên quan

Mẫu thiết kế module trong JavaScript
2020-09-21
Mẫu thiết kế Singleton trong JavaScript
2020-09-21
Mẫu thiết kế nguyên mẫu trong JavaScript
2020-09-21
Lời hứa của JavaScript dành cho người giả
2020-09-15
Sao chép các đối tượng trong JavaScript
2020-09-15
Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu
2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript
2020-09-15
Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích
2020-09-15
Hiểu Hoisting trong JavaScript
2020-09-15
5 Mẹo để Viết Điều kiện Tốt hơn trong JavaScript
2020-09-15