怎么用Javascript實(shí)現(xiàn)觀察者模式

本篇內(nèi)容主要講解“怎么用Javascript實(shí)現(xiàn)觀察者模式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用Javascript實(shí)現(xiàn)觀察者模式”吧!

什么是觀察者模式？

• 觀察者模式一種設(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");

到此，相信大家對(duì)“怎么用Javascript實(shí)現(xiàn)觀察者模式”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！