• javascript的简易发布/订阅模式


    发布/订阅(pub/sub)是一种消息模式,它的两个参与者:发布者和订阅者。发布者向某个信道发布一条消息,订阅者绑定这个信道,当有消息发布到信道里面的时候,订阅者回接受到这个通知。发布者和订阅者是完全解耦的,彼此仅仅共享一个通道名称。

    这种模式提高了应用的可维护性,让应用易于扩展。

    简单的设计思路:设计信道记录发布的信息,然后在订阅者中执行成功回调函数(从信道中监听事件)。

    var PubSub = {
        subscribe: function(key, callback) {

          //this._callbacks = this._callbacks || {};
          //this._callbacks[key] = this._callbacks[key] || [];
          //this._callbacks[key].push(callback);

         this._callbacks || (this.callbacks = {});
            (this._callbacks[key] || (this._callbacks[key] = [])).push(callback);
            return this;
        },
        publish: function() {
            var args = Array.prototype.slice.call(arguments, 0);//参数转数组
            var key = args.shift();//找key
            var list, calls, i, l;
         //没有_callbacks直接返回,没有_callbacks[key]直接返回

          //if(this._callbacks && this._callbacks[key]){
          //  list = this._callbacks[key]
          //  calls = this._callbacks;
          //}else{
          //  return this;
          //}

          if (!(calls = this._callbacks)) return this;
            if (!(list = this._callbacks[key])) return this;
         //执行回调
    for (i = 0, l = list.length; i < l; i++) { list[i].apply(this, args); } return this; } }; // 使用方法 PubSub.subscribe("leju", function() { alert("leju"); }); PubSub.publish("leju");

    上面的原生js实现的,下面的时jquery实现。

    $(function(){
            var obj = $({});
            $.subscribe = function(){
                obj.bind.apply(obj, arguments);
            }
            $.unsubscribe = function(){
                obj.unbind.apply(obj, arguments);
            }
            $.publish = function(){
                obj.trigger.apply(obj, arguments);
            }
        //调用方法 $.subscribe(
    "leju", function( event, a) {
            console.log( event.type, a); }); $.publish(
    "leju", "leju"); })
  • 相关阅读:
    jquery resize事件增强版
    Jquery获取selelct选中值
    IIS URL重写找不到页面 (URLRewriter.dll伪静态)
    session,cookie,sessionStorage,localStorage的区别及应用场景
    移动端1px问题解决方法
    未知宽高元素水平垂直居中方法
    node 和 http
    博客园文字设置颜色,类别方法
    关于node
    node 和 Babel
  • 原文地址:https://www.cnblogs.com/otss/p/4980818.html
Copyright © 2020-2023  润新知