精华内容
下载资源
问答
  • 主要介绍了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显然维护起来真是麻烦呢!

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

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

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

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

    展开全文
  • 观察者模式发布订阅模式有什么区别?大多数的回答都是:Publishers + Subscribers = Observer Pattern,24种基本的设计模式并没有发布-订阅模式,发布订阅模式属于并发型模式;像典型的Mq;这两种相似单并不可以划...

    一、概念

    截取自https://www.cnblogs.com/viaiu/p/9939301.html

    观察者模式和发布订阅模式有什么区别?大多数的回答都是:Publishers + Subscribers = Observer Pattern,24种基本的设计模式并没有发布-订阅模式,发布订阅模式属于并发型模式;像典型的Mq;这两种相似单并不可以划等号。

    我们来重新来回顾一下这两种模式:

           Observer Pattern

             观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新。而观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。

    观察者模式有一个别名叫“订阅—发布模式”。报纸大家都订过吧,当你订阅了一份报纸,每天都会有一份最新的报纸送到你手上,有多少人订阅报纸,报社就会发多少份报纸,这是典型的订阅—发布模式,报社和订报纸的客户就是上面文章开头所说的“一对多”的依赖关系。

     

           Pub-Sub  Pattern

             在“发布者-订阅者”模式中,称为发布者的消息发送者不会将消息编程为直接发送给称为订阅者的特定接收者。这意味着发布者和订阅者不知道彼此的存在。存在第三个组件,称为代理或消息代理或事件总线,它由发布者和订阅者都知道,它过滤所有传入的消息并相应地分发它们。换句话说,pub-sub是用于在不同系统组件之间传递消息的模式,而这些组件不知道关于彼此身份的任何信息。经纪人如何过滤所有消息?实际上,有几个消息过滤过程。最常用的方法有:基于主题和基于内容的。

            简而言之,这两种模式之间的主要区别可以如下所示:

     

    1. 在Observer模式中,Observers知道Subject,同时Subject还保留了Observers的记录。然而,在发布者/订阅者中,发布者和订阅者不需要彼此了解。他们只是在消息队列或代理的帮助下进行通信。
    2. 在Publisher / Subscriber模式中,组件是松散耦合的,而不是Observer模式。
    3. 观察者模式主要以同步方式实现,即当某些事件发生时,Subject调用其所有观察者的适当方法。发布者/订阅者在大多情况下是异步方式(使用消息队列)。
    4. 观察者模式需要在单个应用程序地址空间中实现。另一方面,发布者/订阅者模式更像是跨应用程序模式。

             尽管这些模式之间存在差异,但有些人可能会说发布者 - 订阅者模式是观察者模式的变体,因为它们之间存在概念上的相似性,但并不是一样的,欢迎拍砖! 

     

    二、思考

    vue中,监听数据变化响应更新(响应式),属于观察者模式。

    vue中,事件监听,属于发布-订阅模式。

    可以姑且理解,观察者模式是特殊的发布-订阅模式,只是经纪人是特殊的自己。

    展开全文
  • 例子聊天 使用Firebase实施AngularJS以创建MVC +发布者-订阅者模式
  • 该例子程序是用C++代码编写,实现了发布-订阅者模式;通过该例子可以很好的理解设计模式中的发布-订阅者模式的精髓;
  • </script> </body> </html> vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

    代码简单原理的实现:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    </head>
    <body>
    	<input type="text" id="userName">
    	<br/>
    	<span id="uName"></span>
    
    	<script type="text/javascript">
    
    		var obj={
    			pwd:"123456"
    		};
    		Object.defineProperty(obj,"userName",{
    			get: function(){
    				console.log("get init");
    			},
    			set: function(val){
    				console.log("set init");
    				document.getElementById("uName").innerText=val;
    				document.getElementById("userName").value=val;
    			}
    		});
    
    		document.getElementById("userName").addEventListener("keyup",function(){
    			obj.userName=event.target.value;
    		});
    
    	</script>
    </body>
    </html>
    

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

    展开全文
  • 观察者模式 优点:更加解耦,支持广播通信 缺点:大量观察者,广播有性能问题 举个最简单的例子: 其中body是发布者,回调函数function是观察者。 document.body.onclick = function(){ console.log('我是一个观察...

    观察者模式

    优点:更加解耦,支持广播通信
    缺点:大量观察者,广播有性能问题

    举个最简单的例子:
    其中body是发布者,回调函数function是观察者。

    document.body.onclick = function(){
    	console.log('我是一个观察者');
    }
    document.body.addEventListener('click',function(){
    	console.log('我也是一个观察者')
    })
    
    订阅关注
    发生变化通知
    Observer观察者
    Subject发布者

    Observer(订阅者,观察者)

    function Observer(name){
    	this.name = name;
    	this.update = function(context){
    		// do something
    	}
    }
    

    Subject(发布者)

    function Subject(name){
    	this.name = name;
    	this.observers = [];
    }
    // 增加观察者
    Subject.prototype.addObserver = (observer) => {
    	this.observers.push(observer)
    }
    // 删除观察者
    Subject.prototype.removeObserver = (observer) => {
    	var index = this.observers.indexOf(observer);
    	this.observers.splice(index, 1);
    }
    // 通知观察者
    Subject.prototype.notify = (context) => {
    	var len = this.observers.length;
    	for (var i = 0; i < len; i++){
    		this.observers[i].update(context);
    	}
    }
    

    演示

    var ob1 = new Observer('ob1');
    var ob2 = new Observer('ob2');
    var sub = new Subject('sub');
    sub.addObserver(ob1);
    sub.addObserver(ob2);
    sub.notify('some context');
    sub.removeObserver(ob1);
    
    展开全文
  • 发布订阅模式与观察者模式

    万次阅读 多人点赞 2019-03-29 18:25:12
    设计模式并非是软件开发的专业术语,实际上,“模式”最早诞生于建筑学。 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说,设计模式是在某种场合下对某个问题的一种...
  • zh众所周知,vue2.x版本是通过Object.defineProperty() 种的get进行拦截,set进行发送,其实这只是表面理解,实际运用的是JavaScript的 订阅者发布者模式。首先,了解一下什么是订阅者发布者模式 吧。w3c 上是...
  • 主要介绍了JS模式之简单的订阅者发布者模式,以一个完整实例形式详细分析了JS订阅者发布者模式基本实现技巧,需要的朋友可以参考下
  • 改demo主要叙述java版本发布预订阅模式的主导思想(观察者模式
  • 这个小型的演示项目在实时和异步处理中模拟了典型发布者-订阅者模式的核心。 发布者向注册到其实例的订阅者发送消息。 在这种情况下,发布者一收到任何新的请求或输入,便立即将它们转发给为该消息签名注册的订阅者...
  • js代码-设计模式之发布-订阅者模式
  • 主要介绍了js实现的订阅发布者模式,结合完整示例形式分析了js订阅发布者模式相关实现与使用方法,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • 实战案例,发布者订阅者的设计模式。次案例可以用于消息发布和消息订阅 案例。非常使用的案例。
  • JS中的发布-订阅者模式

    千次阅读 2019-03-13 17:19:43
    vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter, 在数据变动时发布消息给订阅者,触发相应的监听回调。 三、什么是发布-订阅者模式 多个订阅者...
  • NULL 博文链接:https://wb284551926.iteye.com/blog/1923535
  • 下面小编就为大家带来一篇[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了JavaScript事件发布/订阅模式,结合实例形式简单分析了javascript发布/订阅模式的概念、原理及简单使用方法,需要的朋友可以参考下
  • JavaScript设计模式(5)——发布者-订阅模式

    千次阅读 热门讨论 2020-10-27 15:26:42
    发布者订阅模式又称观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知。 简(shuo)而(ju)言(ren)之(hua),发布者-订阅模式就是由发布者和订阅者组成的...
  • 主要介绍了JavaScript设计模式之观察者模式发布订阅模式,结合实例形式详细分析了JavaScript观察者模式发布订阅模式相关概念、原理
  • 二 现实中的发布订阅者模式 1.比如小红最近在淘宝网上看上一双鞋子,但是呢 联系到卖家后,才发现这双鞋卖光了,但是小红对这双鞋又非常喜欢,所以呢联系卖家,问卖家什么时候有货,卖家告诉她,要等一个星期后才...
  • java发布订阅模型demo

    2018-06-05 16:59:50
    java语言,使用设计模式的框架简单模型。万能扩展各类品种
  • 观察者模式也叫 发布者-订阅者模式发布者发布事件,订阅者监听事件并做出反应 在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。 核心代码: // eventProxy.js '...
  • 观察者模式(Observer Pattern)是对象的行为模式,又叫发布-订阅模式、源-监听器模式和从属者模式等。 两种模型(推模型和拉模型): ■推模型是假定主题对象知道观察者需要的数据;而拉模型是主题对象不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 111,098
精华内容 44,439
关键字:

发布者-订阅者模式