Javascript设计模式之观察者模式

之前在博客园写了一些博客,大家也可以自己去看一下(博客园设计模式),这两天看了一下观察者模式,写一下自己的总结。


1.什么是观察者模式

观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知。(其实sql server中的发布订阅也是这个道理)

2.通俗解释

假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知。

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>
</head>
<body>

<script>

    var observer = {//观察者
        villagers: [],//村名
        addVillager: function (callback) {//增加村名
            this.villagers[this.villagers.length] = callback;
        },
        removeVillager: function (callback) {//移除村名
            for (var i = 0; i < this.villagers.length; i++) {
                if (this.villagers[i] === callback) {
                    delete this.villagers[i];
                }
            }
        },
        publish: function (info) {//发布信息
            for (var i = 0; i < this.villagers.length; i++) {
                if (typeof this.villagers[i] === 'function') {
                    this.villagers[i](info);
                }
            }
        },
        make: function (o) {//这里将村子建一个这种广播方式
            for (var i in this) {
                o[i] = this[i];
            }
        }
    };

    var village1 = {};
    observer.make(village1);//将村子1建立这种观察者模式

    var villager11 = {
        read: function (what) {
            console.log('我是第一个村子的第一个村名:' + what);
        }
    };
    var villager12 = {
        read: function (what) {
            console.log('我是第一个村子的第二个村名:'+what);
        }
    };
    village1.addVillager(villager11.read);
    village1.addVillager(villager12.read);
    village1.publish('大家来开会呀!!!');
    village1.removeVillager(villager11.read);
    village1.publish('大家来开会呀!!!');


/*    var village2 = {
        myAddVillager:function(callback){
            this.addVillager(callback);
        },
        myRemoveVillager:function(callback){
            this.removeVillager(callback);
        },
        myPublish:function(info){
            this.publish(info);
        }
    };
    observer.make(village2);//将村子1建立这种观察者模式

    var villager21 = {
        read: function (what) {
            console.log('我是第二个村子的第一个村名:' + what);
        }
    };
    var villager22 = {
        read: function (what) {
            console.log('我是第二个村子的第二个村名:'+what);
        }
    };
    village2.myAddVillager(villager21.read);
    village2.myAddVillager(villager22.read);
    village2.myPublish('大家来领猪肉了!!!');*/


</script>

</body>
</html>

写到这里观察者模式实现了,但是可能会有多个村子需要这种模式,那我们这里将observer改造成构造函数的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>
</head>
<body>

<script>

    function Observer(){//观察者,这里采用构造函数,可以对不同村落进行使用
        if(!(this instanceof Observer)){
            return new Observer();
        }
        this.villagers = [];
    };
    Observer.prototype = {
//        villagers: [],//村名
        addVillager: function (callback) {//增加村名
            this.villagers[this.villagers.length] = callback;
        },
        removeVillager: function (callback) {//移除村名
            for (var i = 0; i < this.villagers.length; i++) {
                if (this.villagers[i] === callback) {
                    delete this.villagers[i];
                }
            }
        },
        publish: function (info) {//发布信息
            for (var i = 0; i < this.villagers.length; i++) {
                if (typeof this.villagers[i] === 'function') {
                    this.villagers[i](info);
                }
            }
        },
        make: function (o) {//这里将村子建一个这种广播方式
            for (var i in this) {
                o[i] = this[i];
            }
        }
    }

    
    var village1 = {};
    var observer1 = new Observer();
    observer1.make(village1);//将村子1建立这种观察者模式

    var villager11 = {
        read: function (what) {
            console.log('我是第一个村子的第一个村名:' + what);
        }
    };
    var villager12 = {
        read: function (what) {
            console.log('我是第一个村子的第二个村名:'+what);
        }
    };
    village1.addVillager(villager11.read);
    village1.addVillager(villager12.read);
    village1.publish('大家来开会呀!!!');
    village1.removeVillager(villager11.read);
    village1.publish('大家来开会呀!!!');


    var village2 = {
        myAddVillager:function(callback){
            this.addVillager(callback);
        },
        myRemoveVillager:function(callback){
            this.removeVillager(callback);
        },
        myPublish:function(info){
            this.publish(info);
        }
    };
    var observer2 = new Observer();
    observer2.make(village2);//将村子1建立这种观察者模式

    var villager21 = {
        read: function (what) {
            console.log('我是第二个村子的第一个村名:' + what);
        }
    };
    var villager22 = {
        read: function (what) {
            console.log('我是第二个村子的第二个村名:'+what);
        }
    };
    village2.myAddVillager(villager21.read);
    village2.myAddVillager(villager22.read);
    village2.myPublish('大家来领猪肉了!!!');
    
</script>

</body>
</html>


你可能感兴趣的:(Javascript设计模式之观察者模式)