前端設計模式之觀察者模式

　　所謂的觀察者模式我所認為的就是訂閱發布。其中中間關於調度方法還有一點區別，這里就不多做敘述了

　　接下來給大家分享下我對所謂的發布訂閱的理解吧，其實這種設計理念在react體現在了跨組件通信中，

原理就是訂閱者寫一個函數然后不執行，接着把其儲存在某一個地方，等待着發布者去觸發這個函數，然后

達到觸發函數進行函數傳參，從而能夠達到組件之中的跨組件通信

 

　　接下來給大家分享下一個簡單的封裝

//第一種方式利用數組是比較啰嗦的
// const Observer={
//     arr:[],
//     $on(event,cb){
//         this.arr.push({[event]:cb})
//     },
//     $emit(event,msg){
//         //console.log(this.arr)
//         this.arr.forEach(item=>{
//             //console.log(Object.keys(item))
//             if(Object.keys(item)[0]===event){
//                 item[Object.keys(item)[0]](msg)
//             }
//         })
//     }
// }


//第二種方式利用對象

//這種方式只能監聽一次  假如我們想要監聽多次可以看下下面第三種方法
// const Observer={
//     arr:{},
//     $on(event,cb){
//         this.arr[event]=cb
//     },
//     $emit(event,msg){
//         this.arr[event](msg)
//     }
// }


//第三種方式 多次監聽的訂閱者
const Observer={
    arr:{},
    //訂閱者監聽函數
    $on(event,cb){
        if(this.arr[event]){
            this.arr[event].push(cb)
        }else{
            this.arr[event]=[cb]
        }
        
    },
    //發布者觸發函數
    $emit(event,msg){
        this.arr[event]&&this.arr[event].forEach(cb=>{
            cb(msg)
        })
    },
    //銷毀階段
    $delete(event){
        delete this.arr[event]
    }
}



//以下為封裝檢驗過程


Observer.$on("up",(msg)=>{
    //訂閱者監聽函數
    console.log(msg)
})
Observer.$on("up",(msg)=>{
    //訂閱者監聽函數
    console.log(msg)
})

Observer.$delete("up")

Observer.$on("down",(msg)=>{
    //訂閱者監聽函數
    console.log(msg)
})



Observer.$emit("up",123)//發布者 做函數的觸發


Observer.$emit("down",456)//發布者


//這樣功能就可以實現了然后拋出使用了

 

　　所謂的發布訂閱在react中不受限制生命周期限制，比如上一邊博客說的在componentDidMount這個生命周期中明明只執行一遍但是里面因為訂閱者存在

所以他不受生命周期的影響只會被發布者控制