js观察者模式

var pubsub = (function(){
    var q = {}
        topics = {},
        subUid = -1;
    //发布消息
    q.publish = function(topic, args) {
        if(!topics[topic]) {return;}
        var subs = topics[topic],
            len = subs.length;
        while(len--) {
            subs[len].func(topic, args);
        }
        return this;
    };
    //订阅事件
    q.subscribe = function(topic, func) {
        topics[topic] = topics[topic] ? topics[topic] : [];
        var token = (++subUid).toString();
        topics[topic].push({
            token : token,
            func : func
        });
        return token;
    };
    //取消订阅
    q.canclesub=function(subtoken){
         for (var m in topics) {
            if (topics[m]) {
                for (var i = 0; i < topics[m].length; i++) {
                    if (topics[m][i].token === subtoken) {
                        topics[m].splice(i, 1);
                        return subtoken;
                    }
                }
            }
        }
        return false;
    }
    return q;
})();
//触发的事件
var logmsg = function(topics, data) {
    console.log("logging:" + topics + ":" + data);
}
//红眼睛订阅 ‘wolfcoming‘
var a = pubsub.subscribe(‘wolfcoming‘, logmsg);
//长耳朵订阅 ‘wolfcoming‘
var b = pubsub.subscribe(‘wolfcoming‘, logmsg);
//短尾巴订阅 ‘wolfcoming‘
var c = pubsub.subscribe(‘wolfcoming‘, logmsg);
//发布消息狼来了
pubsub.publish(‘wolfcoming‘, ‘狼来了‘);
//兔妈妈回来了兔宝宝退订
pubsub.canclesub(a);
pubsub.canclesub(b);
pubsub.canclesub(c);
//发布消息狼来了
pubsub.publish(‘wolfcoming‘, ‘狼来了‘);

  

时间: 2024-08-25 11:48:08

js观察者模式的相关文章

js 观察者模式

观察者模式定义一种一对多的关系,多个观察者订阅一个主题对象,当主题对象发生改变的时候通知所有观察者,使他们能实现更新. 具体实现方式: 定义一个被观察对象,定义一个主题数组,观察者订阅主题通过往数组对象内添加回调函数来实现,当主题发生改变时轮流调用回调函数. var subpub= { topics: [], uid: 0, //订阅 subscribe: function(topic, callback){ var tmp= this.topics[topic] || [] tmp.push(

js观察者模式与Model

目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时通知订阅者. 观察者模式的实现主要涉及三个接口: 1. subscribe (evtName, handler):订阅被观察者的指定事件. 2. unsubscribe (evtName, handler):取消对被观察者指定事件的订阅. 3. publish (evtName, data):被观察

js观察者模式学习

function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] =[]); return stack.push(fn); } this.off=function(key){ var stack; return (stack=obj[key]) != null ? stack.length=0 : void 0;//此处stack.length=0不等同于stac

JS实现观察者模式(订阅/发布模式)

实现 /*  * js 观察者模式 又称 订阅/发布模式  * 通过创建"可观察"对象,当发生一个感兴趣的事件时可将该事件通告给  * 所有观察者,从而形成松耦合 */ // 通用的发布者 EventPublisher = Base.extend({ publish: function(data, type) { EventPublisher.publish(data, type); } }, { subscribers : {         any : []    // 事件类型:

js 之观察者模式

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 支持简单的广播通信,自动通知所有已经订阅过的对象. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用. JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个pubsub对象,其内部包

前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列顺序是一直的:”异步模式”则完全不同,每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,二十执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的. 在浏览器端,耗时时间长的操作都应该异步执行,避免浏览器数去

js实现观察者模式

基本概念介绍 观察者(observer) 模式广泛用于客户端Javascript编程中.所有的浏览器事件都是该模式的例子.它的另一个名字也称为自定义事件(custom events),与那些由浏览器触发的事件相比,自定义事件表示是由你编程实现的事件.此外,该模式的另一个别名也称为订阅/发布(subscriber/publisher)模式. 设计该模式背后的主要动力是促进形成松散耦合.在这种模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知.订阅

js之观察者模式

jquery实现订阅发布者模式 //用jquery来实现观察者模式 (function($) { var o = $({});//创建一个jquery空对象 $.extend({//扩展两个jquery静态方法 dingyue:function() {//订阅方法 o.on.apply(o,arguments); }, fabu:function() {//发布方法 o.trigger.apply(o,arguments); }, tuiding:function() {//退订方法 o.off

谈谈JS的观察者模式(自定义事件)

呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象的接口,功能见注释(测试1) 该 Event 对象的接口需要能被其他对象拓展复用(测试2) // 测试1 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { cons