JS中的發佈訂閱模式

一. 你是如何理解發布訂閱模式的

• JS中的設計模式:
  • 單例模式:處理業務邏輯
  • 構造原型模式:封裝類庫,組件,框架,插件等
    • 類庫:jQuery
      • 只是提供了一些經常使用的方法,能夠應用到任何的項目中,不具有業務性
    • 組件:bootstrap
      • 提供了不少通用的組件(HTML/CSS/JS都是別人規定好的),咱們只須要按照要求使用,就能夠直接的達到效果
    • 插件: swiper/iscroll
      • 針對於一個具體業務的封裝,例如選項卡插件或者輪播圖插件
    • 框架:React/Vue
      • 具有必定編程思想的(MVC/MVVM)叫作框架
  • 發佈訂閱模式:處理一些具體需求的
  • promise模式:處理一些具體需求的
• 發佈訂閱模式
  • 發佈一個計劃表(發佈)
  • 往計劃表中追加一些須要處理的事情(訂閱)

二. 發佈訂閱模式

發佈訂閱模式不是一個死的機制,他是一種思想,一種寫代碼的形式;主要爲了處理一對多的場景,應用於不一樣狀況下的不一樣函數的調用,this很重要

• 手動進行模擬瀏覽器事件機制

  1. 訂閱
  2. 發佈
     • 執行

• 改變this指向

  1. 建立一個小工具盒
  2. 把咱們的方法放到了小工具盒裏邊
  3. 當咱們在想用這個方法的時候,直接就到這個小工具盒變量就能夠

• 處理順序問題的,其實根本就是處理IE事件池亂序問題,那麼咱們就不能用ie的事件池進行,咱們模擬一個事件池(利用發佈訂閱的思想來模擬咱們的事件池)

  1. 監聽的時候添加處理程序
  2. 在發佈的時候將監聽的事件的處理程序都執行    

這裏結合ES6的語法，簡單寫一個發佈訂閱模式的小案例：

// 發佈 emit 訂閱 on {}
function Girl() {
    this._events = {}
}
Girl.prototype.on = function (eventName,callback) {

    //這裏判斷他是否是第一次添加(訂閱)
    if(this._events[eventName]){ 
        this._events[eventName].push(callback); 
    }else{
        this._events[eventName] = [callback]
    }
};
Girl.prototype.emit = function (eventName,...args) { 
    if(this._events[eventName]){
        this._events[eventName].forEach(cb=>cb(...args));
    }
};

let cry = (who) =>{console.log(who+'哭');};
let shopping = (who) =>{console.log(who+'購物');};
let eat = (who) =>{console.log(who+'吃');};
let smile=(who)=>{console.log(who+'笑')};

let girl1 = new Girl();
girl1.on('失戀',cry); 
girl1.on('失戀',eat);
girl1.on('失戀',shopping);
girl1.emit('失戀','小明');  

let girl2 = new Girl();
girl2.on('戀愛',shopping);
girl2.on('戀愛',smile);
girl2.emit('戀愛','小華');