设计模式篇一:观察者模式与发布-订阅模式 矫情吗;* 2022-02-21 10:07 241阅读 0赞 # 观察者模式(Observer) # 观察者模式:**一个对象(主体)根据它维护的一个对象列表(观察者),自动通知它们状态的任何变化。**(举例说明,电商平台关注(订阅)一家店铺(发布者)的鞋子,当鞋子上架之后店铺就会发送消息给用户(订阅者);用户(订阅者)可以通过取消订阅来取消推送消息接收。) 实际上是:主体对观察者传递消息通知,观察者必须将该消息通知订阅到触发事件对象上。 关系链: **目标**<— *继承* — **具体目标(发布者)**< – *订阅* – *调度观察者* — > **具体观察者(订阅者)** — *继承* —> **观察者** 具体代码实现: //观察者列表 function ObserverList(){ this.observerList = []; } ObserverList.prototype.add = function( obj ){ return this.observerList.push( obj ); }; ObserverList.prototype.count = function(){ return this.observerList.length; }; ObserverList.prototype.get = function( index ){ if( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; } }; ObserverList.prototype.indexOf = function( obj, startIndex ){ var i = startIndex; while( i < this.observerList.length ){ if( this.observerList[i] === obj ){ return i; } i++; } return -1; }; ObserverList.prototype.removeAt = function( index ){ this.observerList.splice( index, 1 ); }; //目标 function Subject(){ this.observers = new ObserverList(); } Subject.prototype.addObserver = function( observer ){ this.observers.add( observer ); }; Subject.prototype.removeObserver = function( observer ){ this.observers.removeAt( this.observers.indexOf( observer, 0 ) ); }; Subject.prototype.notify = function( context ){ var observerCount = this.observers.count(); for(var i=0; i < observerCount; i++){ this.observers.get(i).update( context ); } }; //观察者 function Observer(){ this.update = function(){ // 自定义行为 }; } # 发布-订阅模式 # 发布订阅模式:观察者模式也可以说是发布订阅模式,然而发布订阅模式与观察者模式不同之处就在于,**添加了一个中介(调度中心)来避免发布者和订阅者之间产生依赖关系。** 关系链: **订阅者(数量不限)** —*订阅* —> **调度中心** <— *发布* — **发布者(不直接发布)** 两种模式的区别: **观察两种模式其实发现,模式的基本思想是一致的,仅仅是在调度是否是直接调度上有所不同。** 观察者模式是由具体目标直接调度的(eg: dom操作);而发布订阅模式是在调度中心调度,发布者与订阅者不产生依赖。 具体代码实现: var pubsub = {}; (function(myObject) { // Storage for topics that can be broadcast // or listened to var topics = {}; // An topic identifier var subUid = -1; // Publish or broadcast events of interest // with a specific topic name and arguments // such as the data to pass along myObject.publish = function( topic, args ) { if ( !topics[topic] ) { return false; } var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len--) { subscribers[len].func( topic, args ); } return this; }; // Subscribe to events of interest // with a specific topic name and a // callback function, to be executed // when the topic/event is observed myObject.subscribe = function( topic, func ) { if (!topics[topic]) { topics[topic] = []; } var token = ( ++subUid ).toString(); topics[topic].push({ token: token, func: func }); return token; }; // Unsubscribe from a specific // topic, based on a tokenized reference // to the subscription myObject.unsubscribe = function( token ) { for ( var m in topics ) { if ( topics[m] ) { for ( var i = 0, j = topics[m].length; i < j; i++ ) { if ( topics[m][i].token === token ) { topics[m].splice( i, 1 ); return token; } } } } return this; }; }( pubsub )); 参考文献:[《Learning JavaScript Design Patterns》][Learning JavaScript Design Patterns] [Learning JavaScript Design Patterns]: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript
相关 观察者模式 vs 发布订阅模式 目录 场景 观察者模式 发布订阅模式 总结 -------------------- 场景 有一回面试,面试官问: 末蓝、/ 2023年10月06日 19:03/ 0 赞/ 30 阅读
相关 设计模式 之 观察者与发布订阅模式区别 概念 观察者模式 > 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都会得到通知并自动更新。 发布订阅模式 > 订阅者把自己想订阅的 àì夳堔傛蜴生んèń/ 2022年12月27日 09:25/ 0 赞/ 233 阅读
相关 【JavaScript 设计模式】观察者模式与发布订阅模式 JavaScript 设计模式系列文章: [设计模式总览][Link 1] [工厂模式][Link 2] [单例模式][Link 3] [观察者模式/ Bertha 。/ 2022年12月04日 07:58/ 0 赞/ 249 阅读
相关 观察者模式(发布-订阅者模式) 观察者模式定义了一种依赖关系,解决了主体对象和观察者之间功能的耦合,主要应用于大型项目的模块化开发中,解决团队开发中模块之间的通信问题,利用观察者模式还可以实现自定义事件。 素颜马尾好姑娘i/ 2022年05月22日 06:00/ 0 赞/ 236 阅读
相关 设计模式之观察者模式(发布订阅模式) 说明:本文参照《大话设计模式》中的案例做简要解析 观察者模式: 又叫发布-订阅模式,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。 深藏阁楼爱情的钟/ 2022年05月21日 10:39/ 0 赞/ 284 阅读
相关 javascript 观察者模式 发布订阅模式 观察者模式 观察者模式,每一个观察者对象有两个方法 添加监听`subscribe` 发布事件`publish` 观察者有个`list`存放所有的已经添加监 本是古典 何须时尚/ 2022年04月24日 10:14/ 0 赞/ 230 阅读
相关 设计模式篇一:观察者模式与发布-订阅模式 观察者模式(Observer) 观察者模式:一个对象(主体)根据它维护的一个对象列表(观察者),自动通知它们状态的任何变化。(举例说明,电商平台关注(订阅)一家店铺(发布 矫情吗;*/ 2022年02月21日 10:07/ 0 赞/ 242 阅读
相关 学习观察者模式与发布/订阅模式 > 最近学习了观察者模式和发布/订阅模式,但是一直有种不得要领的感觉,今天重新复习了一遍又有了新的思考,记录一下学习收获。 观察者模式 概念引用原文的话如下: > T 港控/mmm°/ 2022年01月20日 03:55/ 0 赞/ 299 阅读
相关 发布订阅模式(观察者模式) 设计模式的目的就是使类成为可复用的组件。 在观察者模式中观察者接口只注重被观察者,而被观察者接口只注重观察者,具体是观察者接口实现类中的哪一个并不在意,而被观察者也是如此。这 清疚/ 2021年12月15日 00:27/ 0 赞/ 311 阅读
还没有评论,来说两句吧...