码迷,mamicode.com
首页 > 编程语言 > 详细

javascript设计模式之观察者模式

时间:2014-09-10 15:27:10      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   java   ar   for   div   

dom 的事件模式就是观察者模式

/*
 * 观察者模式又叫发布者-订阅者模式
 * 我发布一则消息,消息就在那里;你若订阅,我便发送。
*/

/*
 * js和dom之间的实现就是一种观察者模式;
 * 所有的dom元素都发布了事件,然后观察谁订阅了这个事件;
 * 例:div订阅了click事件
*/
document.getElementById("banner").onclick = function () {
    alert("div is clicked!");
};

 

原生实现

/*
 * js 观察者模式 又称 订阅/发布模式
 * 通过创建“可观察”对象,当发生一个感兴趣的事件时可将该事件通告给
 * 所有观察者,从而形成松耦合
*/
var pubsub = (function () {

    var q = {},
        topics = {},
        subUid = -1;

    // 发布方法
    q.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 true;
    };

    // 订阅方法
    q.subscribe = function (topic, func) {

        if (!topics[topic]) {
            topics[topic] = [];
        }

        var token = (++subUid).toString();

        topics[topic].push({
            token: token,
            func: func
        });

        return token;
    };

    //退订方法
    q.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 false;
    };

    return q;
})();


pubsub.subscribe("broadcast", function (topic, data) {
    console.log(topic + " : " + data);    // broadcast : hello world
});

pubsub.publish("broadcast", "hello world");

 

jQuery版本

// jquery 版本
(function ($) {

    var o = $({});

    // 订阅既是事件绑定(观察者)
    $.subscribe = function () {
        o.on.apply(o, arguments);  // on
    };

    $.unsubscribe = function () {
        o.off.apply(o, arguments);
    };

    // 发布既是事件触发
    $.publish = function () {
        o.trigger.apply(o, arguments);  // trigger
    };
} (jQuery));

$.subscribe("j-bro", function (e, data) {
    console.log(data);    // jquery broadcast
});

$.publish("j-bro", "jquery broadcast");
$.publish("j-bro", "jquery broadcast again");

 

javascript设计模式之观察者模式

标签:style   blog   color   os   io   java   ar   for   div   

原文地址:http://www.cnblogs.com/xiankui/p/3964301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!