應屆生都會的設計模式之觀察者模式

• 定義：

  • 觀察者模式 定義對象間的一種一對多的依賴關係，當一個對象的狀態發生變化時，全部依賴它的對象都將獲得通知。
  • 事實上，只要你曾經在DOM節點上綁定過事件函數，那麼你就曾經使用過觀察者模式了。
  • 解釋說明：做爲觀察者你，訂閱了一些消息，被觀察者在有消息的時候就會通知你，而且把消息給到你，這個模式存在的意義就是解耦，被觀察者無需關心你如何處理消息。

• 事件機制自己就是一種觀察者模式

• 觀察者的使用場景就是：

  • 當一個對象的改變須要同時改變其餘對象，而且它不知道具體有多少對象須要改變的時候，就應該考慮使用觀察者模式。
  • 關注公衆號
  • 訂閱雜誌

• 實現一個Event模塊

  • 發佈消息
  • 訂閱消息
  • 退訂消息

• 源碼實現

  // Event事件模塊
  function Event() {
    // 存儲不一樣的事件類型對應不一樣的處理函數 保證後續emmit能夠執行
    this.cache = [];
  }
  // 綁定自定義事件模塊
  Event.prototype.on = function(type, handle) {
    if(!this.cache[type]) {
        this.cache[type] = [handle];
    }else {
        this.cache[type].push(handle);
    }
  }
  // 自動觸發事件的功能
  Event.prototype.emmit = function() {
    // 沒有保證參數是多少個 就用arguments
    
    // 事件類型
    var type = arguments[0];
    // 綁定函數
    var arg = [].slice.call(arguments, 1);
    for(var i = 0; i < this.cache[type].length; i++) {
        this.cache[type][i].apply(this, arg);
        // 檢查是否有標記
        if(this.cache[type][i].flag) {
            this.cache[type].splice(i, 1);
        }
    }
  }
  // 所有清除綁定
  Event.prototype.empty = function(type) {
    this.cache[type] = [];
  }
  // 清除自定義事件的功能
  Event.prototype.remove = function(type, handle) {
    this.cache[type] = this.cache[type].filter(function(ele) {
        return ele != handle;
    })
  }
  // 只觸發一次事件的功能
  Event.prototype.once = function(type, handle) {
    if(!this.cache[type]) {
        this.cache[type] = [];
    }
    // 作標記
    handle.tag = 'true';
    this.cache[type].push(handle);
  }
    
  var oE = new Event();
  function deal1(time) {
    console.log('overtime1:' + time);
  }
  oE.on('over', deal1);
  function deal2(time) {
    console.log('overtime2:' + time);
  }
  oE.on('over', deal2);
    
  oE.emmit('over', '2018-9-25');
  oE.remove('over', deal2);
  oE.emmit('over', 'second-1-1');
  複製代碼

你的點贊是我持續輸出的動力 但願能幫助到你們 互相學習 有任何問題下面留言 必定回覆