JavaScript Observer Pattern

var Users = {
    list: [],
    listeners: {},
    add: function(name) {
        this.list.push({name: name});
        this.dispatch("user-added");
    },
    on: function(eventName, listener) {
        if(!this.listeners[eventName]) this.listeners[eventName] = [];
        this.listeners[eventName].push(listener);
    },
    dispatch: function(eventName) {
        if(this.listeners[eventName]) {
            for(var i=0; i<this.listeners[eventName].length; i++) {
                this.listeners[eventName][i](this);
            }
        }
    },
    numOfAddedUsers: function() {
        return this.list.length;
    }
}

Users.on("user-added", function(obj) {
    alert(Users.numOfAddedUsers());
    console.log("obj:",obj);
});

Users.add("Krasimir");
Users.add("Tsonev");

Referring to http://jsfiddle.net/krasimir/sHNKD/3/

时间: 2024-10-10 10:40:12

JavaScript Observer Pattern的相关文章

Learning JavaScript Design Patterns The Observer Pattern

The Observer Pattern The Observer is a design pattern where an object (known as a subject) maintains a list of objects depending on it (observers), automatically notifying them of any changes to state. When a subject needs to notify observers about s

Design Pattern: Observer Pattern

1. Brief 一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式.若有纰漏请大家指正. 2. Use Case 首先我们来面对一个老到跌渣的故事,并以从未听说过Observer Pattern为前提. 假设要设计一个新闻订阅系统,新闻分为商业.体育和八卦3种,而查收终端有PC.移动终端等,后续还不断增加新闻种类和查收终端. 需求如上,下面我们根据OOD的方式来构建概念模型. 新闻 <- 分类新闻 终端 <- 分类终端

jQuery中的观察者模式(Observer Pattern)

在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern). ■ on方法绑定内置事件,自然触发 比如,我们给页面的body元素绑定一个click事件,这样写. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title&

设计模式之二:观察者模式(Observer Pattern)

先看下观察者模式的定义: The Observer Pattern defines a one-to-many denpendency between objects so that when one object changes state, all of its dependents are notified and updated automatically.:观察者模式定义了对象间一对多依赖关系,使得当一个对象改变状态,则所有依赖于它的对象都会得到通知并被自动更新. 观察者模式又叫发布-

[Design Pattern] Observer Pattern 简单案例

Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer 定义观察者的接口,定义需要观察的对象,已经被通知的接口.BinaryObserver, OctalObserver, HexaObserver 各自实现了 Observer 接口. Subject 是被观察的对象,记录了观察该对象的观察者列表,自身有变动,即可通知观察者列表中的各个观察者. 代码实现

设计模式(二)The Observer Pattern 观察者模式

问题引入 生成一个公告板显示当时的天气状况,当天气状况发生改变的时候公告板能够实时的更新. 模式定义 定义对象之间的一对多的依赖.当一个对象改变状态时,它的全部依赖者都会自己主动收到通知并自己主动更新. 认识模式 该模式在生活中是非经常见的.想想生活中的各种各样的检測系统,报警系统,一旦有重要事件发生时,有关系统总能及时的收到通知.这就是观察者模式. 问题解决 关于观察者模式,java实际上给了我们内置的支持(能够看出该模式还是非经常常使用的吧!)可是我们经常会自己实现. 为什么呢?我们后面会给

设计模式之Observer Pattern

Declaration 首先声明, 本篇blog的内容是参考Design pattern FAQ Part 2 (Design pattern training series)这篇博文写的, 图片也是来自这篇博客. 部分是翻译, 加上自己的理解形成这篇博文. 希望和大家一起学习设计模式, 共同进步. Scene for Observer Pattern 举个例子说明在什么情况下会使用观察者模式,比如说一个网站,有订阅的功能,读者在提交订阅申请的时候会写入自己的邮件地址.那么每当这个网站有新内容更

JavaScript Module Pattern: In-Depth

The module pattern is a common JavaScript coding pattern. It’s generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I’ll review the basics and cover some truly remarkable advance

Head First 之 Design Pattern(二):Observer Pattern

观察者模式是最常用的设计模式之一,[对象之间多对一的依赖关系,当一个对象发生变化时,其会通知所有依赖它的对象].拿订阅报纸和发行报社打比方,报社采集到news制作新的报纸,派送给订阅的客户,以此把最新的消息告知客户.所以,出版社 + 订阅者 = 观察者模式. 这种一对多的关系,也即"一个"主题."多个"观察者能够使得观察者仅仅了解主题推送的消息但不知晓其中的细节,而主题握有观察者列表但不干涉到观察者的个人隐私.所以,它们之间相互有交互,但不紧密,不清楚对方的细节.改