觀察者模式

1. 發(fā)布&訂閱

2. 一對多

3. 優(yōu)點：更加解耦，支持廣播通信

4. 缺點：大量觀察者，廣播有性能問題

   // 主題對象
   class Subject {
     constructor() {
       this.state = {};
       this.observers = [];
     }
   
     getState() {
       return this.state;
     }
   
     setState(state) {
       this.state = state;
       this.notifyAllObservers();
     }
   
     notifyAllObservers() {
       this.observers.forEach(observer => {
         observer.update();
       });
     }
   
     attach(observer) {
       this.observers.push(observer);
     }
   
   }
   
   // 觀察者
   class Observer {
     constructor(name, subject) {
       this.name = name;
       this.subject = subject;
       this.subject.attach(this);
     }
   
     update() {
       console.log(`${this.name} update, state: ${this.subject.getState()}`);
     }
   }
   
   // 測試
   
   let sub = new Subject();
   
   let ob1 = new Observer('Confidence', sub);
   let ob2 = new Observer('Java', sub);
   let ob3 = new Observer('NodeJs', sub);
   
   sub.setState(1);
   

5. 場景

   • 網(wǎng)頁事件綁定

     $('#btn').click(function() {
       console.log(1);
     });
     $('#btn').click(function() {
       console.log(2);
     });
     

   • Promise

     function loadImg() {
       const promise = new Promise((resolve, reject) => {
         var img = document.createElement('img');
         img.onload = function() {
           resolve(img);
         }
         img.onerror = function() {
           reject('圖片加載失敗);
         }
         img.src = 'https://....xxx.png';
       });
       return promise;
     }
     
     
     loadImg().then(res => {
       return res;
     }).then(res => {
       console.log(res);
     })
     

   • jQuery callbacks

     var callbacks = $.Callbacks();
     callbacks.add(function(info) {
       console.log('fn1', info);
     });
     callbacks.add(function(info) {
       console.log('fn2', info);
     });
     
     callbacks.fire('arg1');
     callbacks.fire('arg2');
     

   • nodejs自定義事件