精华内容
下载资源
问答
  • 主要介绍了JS模式之简单的订阅者发布者模式,以一个完整实例形式详细分析了JS订阅者发布者模式基本实现技巧,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之观察者模式(发布者-订阅者模式),本文详细的讲解了JavaScript中的观察者模式,需要的朋友可以参考下
  • JavaScript发布者-订阅者模式

    千次阅读 2019-05-03 20:26:53
    发布者-订阅者模式又称观察者模式:当一个对象(发布者)状态发生改变时,所有依赖它的对象(订阅者)都会得到通知。 该模式广泛应用在异步编程中:我们无需关注对象在异步运行期间的内部状态,只需要订阅感兴趣的...

    #仅简单描述,稍后会新增具体内容:

    发布者-订阅者模式又称观察者模式:当一个对象(发布者)状态发生改变时,所有依赖它的对象(订阅者)都会得到通知。

    该模式广泛应用在异步编程中:我们无需关注对象在异步运行期间的内部状态,只需要订阅感兴趣的事件发生点。

    简单说就是该模式让发布者和订阅者两个对象弱耦合,虽然不太清楚彼此的细节但是不影响彼此通信。

    1.DOM事件

    事实上在我们普通的编程中就应用过该模式,譬如

        document.body.addEventListener('click',function(){
        	console.log("test");
        },false);

    监听用户动作,但是我们并不知道用户什么时候点击。所以我们订阅了click事件,当body节点被点击时发布者body就向订阅者(整个这段程序就是一个订阅者)发布这个消息。

    2.vue中的双向数据绑定就是数据劫持结合发布者-订阅者模式实现的

    双向数据绑定的原理:通过Object.defineProperty给每个发布者或者说需要观察的对象Observer添加getter和setter方法,只要该对象数据发生变化那么就触发setter方法了就会通知Watcher订阅者,订阅者有多个由消息订阅器dep统一管理,Compile负责编译模板,将模板中的变量转换成数据渲染出来,同时将每个指令对应的节点绑定更新函数转化成订阅者一旦数据变化就会收到通知,更新视图。MVVM作为数据绑定的入口,整合了Observer Watcher Compile三者通过Observer监听自己model数据变化,Compile解析模板指令,利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化--视图更新,视图更新--数据变化的效果。

    3.实际应用

    简单的拿CSDN举例:没有用户登录的时候是一个界面,用户登录博客以后会有自己的博客风格譬如:主页背景、代码区的样式,早年使用新浪博客的时候还可以定制自己的博客模块。也就是说网站会在用户登录后做相应的渲染。而渲染的前提是ajax异步请求获取到了用户的登录信息。实现方式(思路)如下

    在login成功的回调函数里刷新博客的主页背景,代码区格式等。

    缺点如下

    • 这些模块不能自行修改自己的名字(因为要在login成功回调函数里使用它的名字做refresh)
    • 假设有一天CSDN也要做自定义模块添加,此时要在回调函数里再加个refresh显然维护起来真是麻烦呢!

    所以应用我们发布者-订阅者模式:

    发布者:回调函数里设定成功后就发布成功的信息

    订阅者:主页背景、代码区、自定义模块区等监听登陆成功信息。

    这样的话只要在自定义模块区添加监听信息的方法就行了,这个可以让开发该模块的同事自行完成就行了,开发登录模块的无需操心。

    展开全文
  • JS 发布者订阅者模式

    2021-08-09 16:45:41
    // 订阅者 EventEmitter.prototype.on = function(ename, callback) { if (!this.events[ename]) { // 初始化创建订阅,一个订阅名可以创建多个时间函数 this.events[ename] = [callback]; } else

    下面是ES5实现发布订阅模式。

    1、直接上代码。

    function EventEmitter() {
        this.events = {};
    };
    // 订阅者
    EventEmitter.prototype.on = function(ename, callback) {
        if (!this.events[ename]) {
            // 初始化创建订阅,一个订阅名可以创建多个时间函数
            this.events[ename] = [callback];
        } else {
            // 订阅已存在,push指定订阅名称尾部
            this.events[ename].push(callback);
        }
    }
    // 发布者
    EventEmitter.prototype.emit = function(ename) {
        // 遍历执行订阅名称下的所有订阅者事件
        this.events[ename] && this.events[ename].forEach(cb => {
            // 执行订阅者函数
            cb();
        });
    }
    // 发布者
    EventEmitter.prototype.off = function(ename, callback) {
        if (this.events[ename]) {
            // this.events[ename] && this.events[ename].filter(cb => cb != callback)
            // console.log('this.events', this.events)
            const targetIndex = this.events[ename].findIndex(cb => cb === callback)
            if (targetIndex !== -1) {
                this.events[ename].splice(targetIndex, 1)
            }
            if (this.events[ename].length === 0) {
                delete this.events[ename]
            }
        }
    }
    // 只执行一次订阅发布,然后移除
    EventEmitter.prototype.once = function(ename, callback) {
        var that = this;
        var fn = function() {
            callback();
            that.off(ename, fn);
        }
        this.on(ename, fn);
    }
    
    
    // 实例化构造函数
    var em = new EventEmitter();
    
    em.on("work", function() {
        console.log('work,订阅发布成功');
    });
    
    var makeOnce = function() {
        console.log("money,移除");
    }
    em.on("money", makeOnce);
    
    em.once("love", function() {
        console.log("love,仅一次");
    });
    
    em.emit("work");
    em.off("money", makeOnce);
    em.emit("money"); // 移除后,无法发布
    em.emit("love"); 
    em.emit("love"); // 只执行一次,再次将不再执行
    
    

    2、如下是打印结果

    展开全文
  • 主要介绍了js实现的订阅发布者模式,结合完整示例形式分析了js订阅发布者模式相关实现与使用方法,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之观察者模式发布订阅模式,结合实例形式详细分析了JavaScript观察者模式发布订阅模式相关概念、原理
  • 2、然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册) 3、最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数(遍历花名册,挨个发短信) // 定义...

    欢迎访问我的个人博客:http://www.xiaolongwu.cn

    简单列子

    下面是实现发布—订阅模式的步骤:

    1、先要指定好谁充当发布者(比如售楼处)

    2、然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册)

    3、最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数(遍历花名册,挨个发短信)

    // 定义订阅发布模式
        var publisher = {}; //定义发布者
        
        publisher.list = []; // 定义发布者的缓存列表,来存放订阅者的回调函数
        
        publisher.on = function (fn){ //  添加订阅者
            this.list.push(fn); //订阅者的回调函数添加进缓存列表
        }
            
        publisher.trigger = function(){
            for(var i = 0,fn;fn = this.list[i++];){
                fn.apply(this,arguments);
            }
        }
        
    // 使用
        publisher.on(function(name){
            console.log('leon1收到' + name);
        });
            
        publisher.on(function(name){
            console.log('leon2收到' + name);
        });
    
        publisher.trigger("哈哈");
    
    

    上面这个是最简单的例子

    未完待续。。。。

    参考文献: https://www.cnblogs.com/tugenhua0707/p/4687947.html

    我的github资源地址:JavaScript设计模式–观察者模式(发布者-订阅者模式)

    我的个人博客地址:http://www.xiaolongwu.cn

    我的CSDN博客地址:https://blog.csdn.net/wxl1555

    如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

    邮箱:wuxiaolong802@163.com

    展开全文
  • JS中的发布-订阅者模式

    千次阅读 2019-03-13 17:19:43
    vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter, 在数据变动时发布消息给订阅者,触发相应的监听回调。 三、什么是发布-订阅者模式 多个订阅者...

    一、前言

    学习vue的时候,对深入响应式原理模模糊糊的,现在简单一下理解。

    二、简述VUE响应原理。

    vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,
    在数据变动时发布消息给订阅者,触发相应的监听回调。

    三、什么是发布-订阅者模式

    简单理解:比如一个商店,会员粉丝经常要询问有什么活动,员工每次都要做一遍解答,工作重复又麻烦,但是把所有会员的邮箱收集成名单,有活动时统一发送邮件。会员就是订阅者,商店就是发布者会在合适的时候遍历名单,依次给会员发布消息。发送邮件通知就是一个的发布—订阅模式

    多个订阅者(一般是注册的函数)同时监听同一个数据对象,当这个数据对象发生变化的时候会执行一个发布事件,通过这个发布事件会通知到所有的订阅者,使它们能够自己改变对数据对象依赖的部分状态。

    在这里插入图片描述

    四、发布订阅者模式的作用

    主要为了处理一对多的场景,应用于不同情况下的不同函数的调用

    优点:耦合性低,便于代码的维护
    缺点:创建订阅者本身要消耗一定的时间和内存,可能订阅的消息未发生,但这个订阅者会始终存在于内存中

    五、代码示例

    • 创建发布-订阅者模式的对象
    	function Event () {
    	  this.handlers = {};
    	}
    
    	
    	Event .prototype = {
    	 	// 订阅事件
    	    on: function(eventType, handler){
    	        var self = this;
    	        if(!(eventType in self.handlers)) {
    	           self.handlers[eventType] = [];
    	        }
    	        self.handlers[eventType].push(handler);
    	        return this;
    	    },
    	     // 触发事件(发布事件)
    	    emit: function(eventType){
    	       var self = this;
    	       var handlerArgs = Array.prototype.slice.call(arguments,1);
    	       for(var i = 0; i < self.handlers[eventType].length; i++) {
    	         self.handlers[eventType][i].apply(self,handlerArgs);
    	       }
    	       return self;
    	    },
    	    // 删除订阅事件
    	    off: function(eventType, handler){
    	        var currentEvent = this.handlers[eventType];
    	        var len = 0;
    	        if (currentEvent) {
    	            len = currentEvent.length;
    	            for (var i = len - 1; i >= 0; i--){
    	                if (currentEvent[i] === handler){
    	                    currentEvent.splice(i, 1);
    	                }
    	            }
    	        }
    	        return this;
    	    }
    	};	
    	 
    
    • 使用发布-订阅者模式
    	
    	let Publisher = new Event ();	 
    	//订阅事件a
    	Publisher.on('a', function(e){
    	    console.log(1 + e);
    	});
    	Publisher.on('a', function(e){
    	    console.log(2 + e);
    	});
    	 
    	//触发事件a
    	Publisher.emit('a', '我是第1次调用');
    	 
    	Publisher.emit('a', '我是第2次调用'); 
    	
    
    展开全文
  • js发布订阅者模式es6实现及其图解

    千次阅读 2019-07-04 13:44:06
    //发布者发布, 通知所有主题的所有订阅者更新 pub . publish ( dep1 ) ; console . log ( "===========================" ) ; //新建主题, 并向主题中增加订阅者 let dep2 = new Dep ( item => item + ...
  • 下面小编就为大家带来一篇[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 发布订阅模式与观察者模式

    万次阅读 多人点赞 2019-03-29 18:25:12
    设计模式并非是软件开发的专业术语,实际上,“模式”最早诞生于建筑学。 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说,设计模式是在某种场合下对某个问题的一种...
  • 观察者模式也叫 发布者-订阅者模式发布者发布事件,订阅者监听事件并做出反应 在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。 核心代码: // eventProxy.js '...
  • 今天重温《JavaScript高级程序设计》扫了JavaScript实现发布者订阅者模式的盲区。 书上如是说。 事件是JavaScript和浏览器交互的主要途径。事件是一种叫做观察者的设计模式。这是一种创建松散耦合代码的技术。对象...
  • observer和subscribe/publish observer(观察者模式) 概念 ...目标状态发生改变并且观察者可能对这些改变感兴趣,就会发送一个通知消息...《JavaScript设计模式》一书中给出了观察者模式的实现方法,使用了四个组件(书
  • 在发布订阅模式中,发布者订阅者并不会直接交流,由一个中间调度者做中间人,实现消息的传递。相对于观察者模式,发布订阅模式的规模更适用于较大规模的消息通知 优点:发布订阅模式将对象之间解耦,发布者不必...
  • 发布者订阅模式简介 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开发中,一般用事件模型来替代传统的发布—订阅...
  • 假设fn1,fn2,fn3都可以视作一个事件的发布者,执行它,就会发布一个事件。这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序。增加一个消息订阅者的方法: class AsyncFunArr...
  • 观察者模式 优点:更加解耦,支持广播通信 缺点:大量观察者,广播有性能问题 举个最简单的例子: 其中body是发布者,回调函数function是观察者。 document.body.onclick = function(){ console.log('我是一个观察...
  • 上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式)。可在《Javascript设计模式》一书中,这两种模式还是有些区别的。书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅...
  • 一、什么是发布-订阅者模式 我们在使用发布-订阅者模式之前,先了解什么是发布-订阅者模式。简单来说,发布订阅这模式就是一种一对多的依赖关系。多个订阅者(一般是注册的函数)同时监听同一个数据对象,当这个...
  • 说到发布订阅模式,我看到很多人将它和观察者模式说成一个,看了这么多的博文介绍,我还是倾向于他们两个是两种模式。下面来说一下我的理解吧。 可以参考这篇https://www.cnblogs.com/lovesong/p/5272752.html来看...
  • 小而美的pubsub库,发布订阅者模式
  • 1. 什么是观察者模式/发布-订阅模式? 2. 观察者模式的实现 3. 发布-订阅模式的实现 4. Vue中的发布-订阅模式 4.1 EventBus 4.2 Vue源码 5. 观察者模式的优缺点 6. 发布-订阅模式的优缺点
  • 2. 发布订阅者模式:该模式也有两种角色:“发布者和订阅者”,他们是通过中间层进行相互通信,并将双方关系进行绑定。这两种角色相互不知道对方是谁。 总结:观察者模式和发布订阅者作用的目的其实是一样的,只...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,334
精华内容 8,133
关键字:

js发布者订阅者模式