觀察者模式下es6的實現(自定義可監聽事件)


定義

觀察者模式:又叫發布訂閱模式,多個觀察者可以實時監聽一個主題對象,而javascript中最常用的實現方式是事件觸發機制。

es6實現:

要知道需要有什么東西,類和構造函數是es6中基本的對象結構

class BaseEvent {

  constructor() {}

}

首先類中要能存儲各種觸發回調函數,通常用數組

此時構造函數如下

constructor() {

  this.handlerFunc = [];

}

現在類的主體已經完成,考慮添加事件行為

如:監聽事件函數on;觸發事件函數trigger等

然后是實現

on(eName, callback) {

  if (!this.handlerFunc[eName]) {   // 判斷事件是否存在

    this.handlerFunc[eName] = [];

  }

  this.handlerFunc[eName].push(callback); 

}

trigger(eName, params) {

  this.this.handlerFunc[eName].forEach(func => {

    func.call(this, params);

  })

}

最后事件的繼承

class MyEvent extends BaseEvent {

  constructor() {

    super();

  }

}

es6中class與extends 語法糖

es6使用語法糖實現類與類的繼承,相較於es5要簡單的多:es5中的繼承有原型鏈繼承,構造函數(注意與es6中構造函數的區別)繼承,組合繼承,組合繼承是最常采用的方法

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM