Javascript设计模式之观察者模式

最新推荐文章于 2022-10-15 21:37:14 发布

cangowu

最新推荐文章于 2022-10-15 21:37:14 发布

阅读量863

点赞数

分类专栏： javascript 设计模式

本文链接：https://blog.csdn.net/wzgdjm/article/details/51002704

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

设计模式

1 篇文章 0 订阅

订阅专栏

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

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>

cangowu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript设计模式之观察者模式

之前在博客园写了一些博客，大家也可以自己去看一下（博客园设计模式），这两天看了一下观察者模式，写一下自己的总结。1.什么是观察者模式观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知。（其实sql server中的发布订阅也是这个道理）2.通俗解释假如以前村里的广播是一个观察者，那么每个村民就是被观察对象，
复制链接

扫一扫