手把手教你用Javascript實現(xiàn)觀察者模式

更新時間：2021年12月02日 16:44:11 作者：1900's 88 keys

這篇文章主要為大家介紹了Javascript觀察者模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

什么是觀察者模式？

觀察者模式一種設(shè)計模式。
觀察者模式定義了對象間的一種一對多的依賴關(guān)系，當(dāng)一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都將得到通知，并自動更新。
簡單說明，在觀察者模式中，有兩個模型，一個觀察者(observer)和一個被觀察者(Observed)。當(dāng)被觀察者發(fā)生改變或變化時，會通知觀察者。

場景模擬

倘若即將到來雙11，想要在雙11購買商品的人就是觀察者(Observer)
想要購買的商品就是被觀察者(Observed)
為了更加形象，添加一個商家來改變商品的價格，商家也就是發(fā)布者(Publish)
當(dāng)雙11當(dāng)天，商家(發(fā)布者(Publish))會修改商品（被觀察者(Observed)）的價格，然后關(guān)注訂閱該商品的人（觀察者(Observer)）就會收到信息通知。

在這里插入圖片描述

代碼實現(xiàn)

//觀察者設(shè)計模式
//發(fā)布者 -->商家
var shopObj = {};
//商品列表 [key:[]], key為商品名
shopObj.list = [];
//訂閱方法
shopObj.listen = function ( key, fn) {// key是商品型號, fn這個函數(shù)就是訂閱的行為
    if (!this.list[key]) {
        this.list[key] = [];
    }
    this.list[key].push(fn);//往商品名為key的商品列表中添加訂閱
}
//發(fā)布消息方法
shopObj.publish = function (key) {
    //var key = arguments[0];//如果不傳參數(shù)key，這樣也可以
    var fns = this.list[key];
    // for (var i = 0; i < fns.length; i++) {
        for(var i = 0 ,fn; fn = fns[i++];){
        //執(zhí)行訂閱的函數(shù)fn  arguemnts儲存的所有實參
        // var fn = fns[i++];
        fn.apply(this, arguments)
    }
}
//A用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log( "A用戶收到：" + brand + model + "手機降價了");
})
//B用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log("B用戶收到：" + brand + model + "手機降價了");
})
//c用戶添加訂閱
shopObj.listen("小米", function (brand, model) {
    console.log("C用戶收到：" + brand + model + "手機降價了");
})
//雙11 商家發(fā)布消息華為降價的信息
shopObj.publish("華為", "p30");
shopObj.publish("小米", "Mix4");

在這里插入圖片描述

重構(gòu)代碼

//觀察者設(shè)計模式
var Eevent = {
    //商品列表 [key:[]], key為商品名
    list: [],
    //訂閱方法
    listen: function (key, fn) {// key是商品型號, fn這個函數(shù)就是訂閱的行為
        if (!this.list[key]) {
            this.list[key] = [];
        }
        this.list[key].push(fn);
    },
    //發(fā)布消息方法
    publish: function (key) {
        //var key = arguments[0];//如果不傳參數(shù)key，這樣也可以
        var fns = this.list[key];
        // for (var i = 0; i < fns.length; i++) {
        for (var i = 0, fn; fn = fns[i++];) {
            //執(zhí)行訂閱的函數(shù)fn  arguemnts儲存的所有實參
            // var fn = fns[i++];
            fn.apply(this, arguments)
        }
    }
}
//觀察者對象初始化
var initEvent = function (obj) {
    for (var i in Eevent) {
        obj[i] = Eevent[i];
    }
}
//發(fā)布者 -->商家
var shopObj = {};
initEvent(shopObj);
//A用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log("A用戶收到：" + brand + model + "手機降價了");
})
//B用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log("B用戶收到：" + brand + model + "手機降價了");
})
//c用戶添加訂閱
shopObj.listen("小米", function (brand, model) {
    console.log("C用戶收到：" + brand + model + "手機降價了");
})
//雙11 商家發(fā)布消息華為降價的信息
shopObj.publish("華為", "p30");
shopObj.publish("小米", "Mix4");

在這里插入圖片描述