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('戀愛','小華');