灏天阁

中介者模式

· Yin灏
/**
 * 中介者模式
 * 通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用,降低他们之间的耦合。
 */

// 创建中介者对象
// 中介者对象
var Mediator = function () {
  // 消息对象
  var _msg = {};
  return {
    /**
     * 订阅消息方法
     * @param {*} type  消息名称
     * @param {*} action  消息回调函数
     */
    register: function (type, action) {
      // 如果该消息存在
      if (_msg[type]) {
        // 存入回调函数
        _msg[type].push(action);
      } else {
        // 不存在,则建立该消息容器
        _msg[type] = [];
        // 存入新消息回调函数
        _msg[type].push(action);
      }
    },
    /**
     * 发布消息方法
     * @param {*} type 消息名称
     */
    send: function (type) {
      // 如果该消息已经被订阅
      if (_msg[type]) {
        // 遍历已存储的消息回调函数
        for (var i = 0, len = _msg[type].length; i < len; i++) {
          // 执行该回调函数
          _msg[type][i] && _msg[type][i]();
        }
      }
    },
  };
};

// 尝试
// 单元测试
// 订阅 demo 消息,执行回调函数 - 输出 first
Mediator.register("demo", function () {
  console.log("first");
});
// 订阅 demo 消息,执行回调函数 - 输出 second
Mediator.register("demo", function () {
  console.log("second");
});
// 发布 demo 消息
Mediator.send("demo");
/*
  结果:
    first
    second
*/

/**
 * 显隐导航小组件
 * 订阅消息
 * @param {*} mod  模块
 * @param {*} tag  处理的标签
 * @param {*} showOrHide  显示还是隐藏
 */
var showHideNavWidget = function (mod, tag, showOrHide) {
  // 获取导航模块
  var mod = document.getElementById(mod),
    tag = mod.getElementsByTagName(tag),
    showOrHide = !showOrHide || showOrHide === "hide" ? "hidden" : "visible";
  for (var i = tag.length - 1; i >= 0; i--) {
    tag.style.visibility = showOrHide;
  }
};

/**
 * 用户收藏导航模块
 */
(function () {
  //... 其他交互逻辑
  // 订阅隐藏用户收藏导航消息提醒消息
  Mediator.register("hideAllNavNum", function () {
    showHideNavWidget("collection_nav", "b", false);
  });
  // 订阅显示用户收藏导航消息提醒消息
  Mediator.register("showAllNavNum", function () {
    showHideNavWidget("collection_nav", "b", true);
  });
  // 订阅隐藏用户收藏导航网址消息
  Mediator.register("hideAllNavUrl", function () {
    showHideNavWidget("collection_nav", "span", false);
  });
  // 订阅显示用户收藏导航网址消息
  Mediator.register("hideAllNavUrl", function () {
    showHideNavWidget("collection_nav", "span", true);
  });
})();

// 推荐用户导航内的导航有消息提醒功能

/**
 * 推荐用户导航
 */
(function () {
  //...其他交互逻辑
  // 订阅隐藏推荐用户导航消息提醒消息
  Mediator.register("hideAllNavNum", function () {
    showHideNavWidget("recommend_nav", "b", false);
  });
  // 订阅显示推荐用户导航消息提醒消息
  Mediator.register("showAllNavNum", function () {
    showHideNavWidget("recommend_nav", "b", true);
  });
})();

// 最近常用导航内的导航有导航网址功能

/**
 * 最近常用导航
 */
(function () {
  //... 其他交互逻辑
  // 订阅显示最近常用导航网址消息
  Mediator.register("hideAllNavUrl", function () {
    showHideNavWidget("recently_nav", "span", "hide");
  });
  // 订阅显示最近常用导航网址消息
  Mediator.register("showAllNavUrl", function () {
    showHideNavWidget("recently_nav", "span", "show");
  });
})();

/**
 * 发布消息
 */
// 设置层消息
(function () {
  // 消息提醒选框
  var hideNum = document.getElementById("hide_num"),
    hideUrl = document.getElementById("hide_url");
  // 消息提醒选框事件
  hideNum.onchange = function () {
    if (hideNum.checked) {
      Mediator.send("hideAllNavNum");
    } else {
      Mediator.send("showAllNavNum");
    }
  };
  // 网址选框事件
  hideUrl.onchange = function () {
    if (hideUrl.checked) {
      Mediator.send("hideAllNavUrl");
    } else {
      Mediator.send("showAllNavUrl");
    }
  };
})();

- Book Lists -