中介者模式
·
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");
}
};
})();