`

js 实现 观察者模式 相互监听

    博客分类:
  • js
阅读更多

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一。观察者主要让订阅者与发布者解耦,发布者不需要知道哪些模块订阅了这个主题,它只管发布这个主题就可以了,同样订阅者也无需知道那个模块会发布这个主题,有利于代码的模块化,减少重复代码,增加代码的可维护性。当然一个发布者同时也可以是个发布者。

1.创建一个观察者

 

function ObserverBase(){
   this.listeners = {};
}

 

ObserverBase.prototype.register_listener = function(event,listener){
    if(!this.listeners[event]){
        this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
    return this;
};//注册订阅者

 

ObserverBase.prototype.fire_event = function(event,data){
    _(this.listeners[event]).each(function(listener){
        listener(data);
    });
};//发布事件

 

ObserverBase.extend = function(Child, Parent) {
    var blank_obj = function () {
    };
    blank_obj.prototype = Parent.prototype;
    Child.prototype = new blank_obj();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
};//js 实现继承

 2.

   创建两个类(即使订阅者又是发布者)

  

function Event_1(id){
        ObserverBase.call(this);
        this.id = id;
    
    ObserverBase.extend(Event_1, ObserverBase);
    Event_1.prototype.say_1 = function (){} 
    Event_1.prototype.do_1 = function(){}

    Event_1.EVENTS = {
    SAY: 'say_1',
    DO: 'do_1'
      }
}
  

 

 

function Event_2(id){
        ObserverBase.call(this);
        this.id = id;
    
    ObserverBase.extend(Event_2, ObserverBase);
    Event_2.prototype.say_2 = function (){} 
    Event_2.prototype.do_2 = function(){}

    Event_2.EVENTS = {
    SAY: 'say_2',
    DO: 'do_2'
    }
}
 

 

 

 

 3.

    注册两个类之间的监听事件

 

var event_1 = new Event_1('event_1');
var event_2 = new event_2('event_2');

event_2.register_listener(event_1.EVENTS.SAY, event_2.do.bind(event_2));

event_1.register_listener(event_2.EVENTS.SAY, event_1.do.bind(event_2));

 

这样就可以实现两者的相互监听 

 

 

 

 

分享到:
评论

相关推荐

    JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

    观察者模式,也被称为发布订阅...在JavaScript中,通过事件机制可以方便地实现观察者模式,从而实现高效、灵活的代码结构。无论是简单的按钮点击事件,还是复杂的业务逻辑交互,观察者模式都能提供一种优雅的解决方案。

    JavaScript原生实现观察者模式的示例

    通过以上三个方法,`PubSub`类允许开发者在JavaScript中实现一个简单的观察者模式,让对象能够相互通告特定事件的发生,而无需彼此直接了解对方的存在。 文章还提到了`arguments`对象。这是JavaScript函数内置的一...

    原生js实现的观察者和订阅者模式简单示例

    下面我们将深入探讨如何使用原生JavaScript实现观察者模式和订阅者模式,并通过一个简单的实例进行演示。 观察者模式的核心概念是“发布-订阅”,即一个主题(发布者)可以发布事件,多个订阅者可以监听并响应这些...

    javascript设计模式 – 观察者模式原理与用法实例分析

    在JavaScript中,观察者模式常用于实现事件监听、组件通信、MVVM(Model-View-ViewModel)框架等。 总的来说,观察者模式是JavaScript开发中不可或缺的设计模式之一,它提供了处理对象间动态依赖关系的有效手段,...

    JavaScript设计模式Demo

    在JavaScript中,事件监听器和事件触发就是典型的观察者模式应用。 4. **策略模式**:定义一系列算法,并将每个算法封装起来,使它们可以相互替换。在JavaScript中,这常用于处理条件分支,让代码更易于理解和维护...

    设计模式_javascript_

    在JavaScript中,常见的设计模式有单例模式、工厂模式、观察者模式、装饰器模式、代理模式、策略模式、命令模式、模态模式、建造者模式以及组合模式等。这些模式都是为了提升代码质量、降低复杂度和提高代码复用性。...

    《Javascript 设计模式》课程代码源码

    7. **观察者模式**:也称为发布/订阅模式,它定义了对象间的一种一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。在JavaScript中,可以使用事件监听和触发来实现。 8. **...

    常用的Javascript设计模式.pdf

    - **观察者模式**:定义了一种一对多的依赖关系,让多个观察对象同时监听某一个主题对象。 - **适配器模式**:将一个接口转换成客户希望的另一个接口,使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 ...

    Pro_JavaScript_Design_Patterns

    JavaScript的事件监听和触发机制就是观察者模式的一种应用。 7. **策略模式**:定义一系列算法,并将每个算法封装起来,使它们可以相互替换。在JavaScript中,这可能涉及函数组合和高阶函数。 8. **装饰器模式**:...

    pro javascript design patterns

    观察者模式定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。在JavaScript中,可以通过事件监听机制来实现。 ### 策略模式(Strategy Pattern) 策略模式...

    Pro Javascript Design Patterns

    JavaScript中的事件监听和触发机制就是观察者模式的体现,书中有详细的实现示例。 6. **装饰器模式**:用于在不修改原有对象的基础上,动态地给对象添加新的行为或属性。JavaScript中的装饰器在ES6+中被正式引入,...

    JavaScript.Design.Patterns

    6. **观察者模式**(发布/订阅):允许一个对象在其状态改变时通知其他对象,而无需显式引用这些对象。在JavaScript中,可以使用事件监听器和触发器实现这一模式。 7. **装饰者模式**:动态地将责任附加到对象上,...

    js-design-patterns:此仓库包含我的javascript设计模式文章的所有示例

    在JavaScript中,命令模式用于封装请求作为对象,而观察者模式则用于实现发布/订阅模型,让多个对象能监听并响应其他对象的状态变化。 4. **责任链模式**: 责任链模式允许将请求沿着处理者链传递,直到找到合适的...

    DesignPatterns:JavaScript设计模式

    在JavaScript中,可以使用事件监听和触发来实现观察者模式,如DOM事件监听和发布订阅模式。 四、策略模式 策略模式定义了一系列可互换的算法,并将每一个算法封装起来,使它们可以相互替换。在JavaScript中,可以...

    仅用100行代码实现的JavaScript MVC样式框架

    这可能通过观察者模式或脏检查机制来实现。 - **路由**:如果存在,将处理URL变化,根据不同的URL加载相应的视图和模型。 由于描述中提供了博客链接,你可以访问该博客以获取更具体的实现细节和代码解释。通过分析...

    详解JavaScript中的客户端消息框架设计原理

    在探讨JavaScript中的客户端消息框架设计原理时,我们首先需要明确几个核心概念,即中介者模式(Mediator Pattern)与观察者模式(Observer Pattern)。这两种模式在客户端与服务器端的通信中扮演着重要的角色,它们...

    Patterns in Java(java 设计模式)

    12. **观察者模式**:定义对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。Java的`java.util.Observer`和`java.util.Observable`接口就是观察者模式的基础。 13...

Global site tag (gtag.js) - Google Analytics