js设计模式 --- 发布订阅模式(观察者模式)

EasonTyler 发布于2019-08-22 14:52 / 1174人阅读

摘要：由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。

发布订阅模式

发布订阅模式又叫观察者模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

这是一种创建松散耦合代码的技术。它定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。

观察者模式中有主题(Subject)和观察者(Observer),分别对应报社和订阅用户(你).观察者模式定义了对象之间的一对多的依赖关系,这样,当"一"的一方状态发生变化时,它所依赖的"多"的一方都会收到通知并且自动更新.如图:

实现

var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发，则执行callback回调函数
    on: function (eventName, callback) {
        //我的代码
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })   
        }      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
       if(this.handles[arguments[0]]){
           for(var i=0;i
或者
var eve = function () {
            // 通过on接口监听事件eventName
        // 如果事件eventName被触发，则执行callback回调函数
    this.on = function (eventName, callback) {
        //我的代码
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })   
        }      
        if(!this.handles[eventName]){
            this.handles[eventName]=[];
        }
        this.handles[eventName].push(callback);
    };
        // 触发事件 eventName
    this.emit = function (eventName) {
        //你的代码
        if(this.handles[arguments[0]]){
            for(var i=0;i
测试
//var Event = new eve(); //第二种函数类型
Event.on("test", function (result) {
    console.log(result);
});
Event.on("test", function () {
    console.log("test");
});
Event.emit("test", "hello world"); // 输出 "hello world" 和 "test"

var person1 = {};
var person2 = {};
Object.assign(person1, Event);
console.log(person1);
console.log(person2);
console.log("ssssssssssssssssssssssss");

Object.assign(person2, Event);

console.log(person1);
console.log(person2);
console.log("aaaaaaaaaaaa");

person1.on("call1", function () {
    console.log("person1");
});

console.log(person1);
console.log(person2);
console.log("bbbbbbbbbbbbbbbbbbbbbb");

person2.on("call2", function () {
    console.log("person2");
});

console.log(person1);
console.log(person2);
console.log("ccccc");




person1.emit("call1"); // 输出 "person1"
person1.emit("call2"); // 没有输出
person2.emit("call1"); // 没有输出
person2.emit("call2"); // 输出 "person2"

console.log(person2.handles ===person1.handles);
观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。
总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

优点
   时间上解耦对象间解耦
缺点 
   创建这个函数同样需要内存，过度使用会导致难以跟踪维护

云服务器 GPU云服务器发布订阅模式订阅发布模式 DTS 订阅发布模式 js观察者模式视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92947.html

10分钟弄懂一种简单的js设计模式（观察者/发布订阅）

摘要：发布者注册发布订阅者自动打印消息消息观察者模式与发布订阅模式类似。在此种模式中，一个目标物件在它本身的状态改变时主动发出通知，观察者收到通知从而使他们的状态自动发生变化。做为非科班出身的前端er，每次听到设计模式都感觉很高大上，总感觉这些东西是造火箭原子弹用的，距离我们这些造螺丝钉很遥远。但是最近在做一个聊天消息的业务时，发现貌似用上发布订阅模式业务就很清晰了。创建一个消息类当作发布...

xiguadada 2019-08-26 10:13 评论0 收藏0
观察者模式和发布订阅模式（JS）

摘要：最近被人问到设计模式，观察者模式和发布订阅模式二者有什么区别。观察者模式观察者模式，目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。最近被人问到设计模式，观察者（Observer）模式和发布（Publish）/订阅（Subscribe）模式二者有什么区别。其实这两种模式还是有些许差异的，本质上的区别是调度的方式不同。观察者模式观察者模式，目标和观察者是基类...

Sanchi 2019-08-23 12:59 评论0 收藏0
JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
JS设计模式之Obeserver（观察者）模式、Publish/Subscribe（发布/订阅）模式

摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式定义《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。《设计模...

荆兆峰 2019-08-26 13:37 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0
js设计模式笔记 - 观察者模式

摘要：姓名小强正式上班时间前端大大强订阅了这个消息姓名大大强正式上班时间发布者发布消息前端小强姓名小强正式上班时间大大强姓名大大强正式上班时间通过添加了一个，我们实现了对职位的判断。观察者模式，定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。事实上，只要你曾经在DOM节点上绑定过事件函数，那么你就曾经使用过观察者模式了！ document.b...

txgcwm 2019-08-22 10:40 评论0 收藏0