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

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

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

什么是觀察者模式？

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

場景模擬

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

在這里插入圖片描述

代碼實(shí)現(xiàn)

//觀察者設(shè)計(jì)模式
//發(fā)布者 -->商家
var shopObj = {};
//商品列表 [key:[]], key為商品名
shopObj.list = [];
//訂閱方法
shopObj.listen = function ( key, fn) {// key是商品型號(hào), fn這個(gè)函數(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儲(chǔ)存的所有實(shí)參
        // var fn = fns[i++];
        fn.apply(this, arguments)
    }
}
//A用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log( "A用戶收到：" + brand + model + "手機(jī)降價(jià)了");
})
//B用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log("B用戶收到：" + brand + model + "手機(jī)降價(jià)了");
})
//c用戶添加訂閱
shopObj.listen("小米", function (brand, model) {
    console.log("C用戶收到：" + brand + model + "手機(jī)降價(jià)了");
})
//雙11 商家發(fā)布消息華為降價(jià)的信息
shopObj.publish("華為", "p30");
shopObj.publish("小米", "Mix4");

在這里插入圖片描述

重構(gòu)代碼

//觀察者設(shè)計(jì)模式
var Eevent = {
    //商品列表 [key:[]], key為商品名
    list: [],
    //訂閱方法
    listen: function (key, fn) {// key是商品型號(hào), fn這個(gè)函數(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儲(chǔ)存的所有實(shí)參
            // var fn = fns[i++];
            fn.apply(this, arguments)
        }
    }
}
//觀察者對(duì)象初始化
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 + "手機(jī)降價(jià)了");
})
//B用戶添加訂閱
shopObj.listen("華為", function (brand, model) {
    console.log("B用戶收到：" + brand + model + "手機(jī)降價(jià)了");
})
//c用戶添加訂閱
shopObj.listen("小米", function (brand, model) {
    console.log("C用戶收到：" + brand + model + "手機(jī)降價(jià)了");
})
//雙11 商家發(fā)布消息華為降價(jià)的信息
shopObj.publish("華為", "p30");
shopObj.publish("小米", "Mix4");

在這里插入圖片描述