javascript设计模式之观察者模式

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");