您的位置：首页 > 其它
设计模式知识连载（33）---中介者模式:

2017-12-28 14:26 471 查看
<body>

<h3>设计模式知识连载（33）---中介者模式:</h3>
<p>
通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。有时中介者对象也可以改变对象之间的交互
</p>

<hr>
<div>
<h3>用户收藏导航模块</h3>
<div id = 'collection_nav'>
<b>111</b>
<b>222</b>
<b>333</b>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
</div>
<div>
<h3>推荐用户导航</h3>
<div id = 'recommend_nav'>
<b>111</b>
<b>222</b>
<b>333</b>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
</div>
<div>
<h3>最近常用导航</h3>
<div id = 'recently_nav'>
<b>111</b>
<b>222</b>
<b>333</b>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
</div>

<div>
<p><input type="checkbox" name="msg" id = 'hide_num'>消息提醒选框</p>
<p><input type="checkbox" name="url" id = 'hide_url'>网址选框</p>
</div>

<script type="text/javascript">

/**
*   案例一：导航设置层，方式一：初始
*/
// 中介者模式
var Mediator = (function() {
// 消息对象
var _msg = {} ;
return {
/***
*   订阅消息方法
*   参数 type     消息名称
*   参数 action   消息回调函数
***/
register : function(type, action) {
// 如果该消息存在
if(_msg[type]) {
// 存入回调函数
_msg[type].push(action) ;
// 如果不存在，则建立该消息容器
}else {
_msg[type] = [] ;
// 存入新消息回调函数
_msg[type].push(action) ;
}
},
/***
*   发布消息方法
*   参数 type     消息名称
***/
send : function(type) {
// 如果该消息已经被订阅
if(_msg[type]) {
// 遍历已存储的消息回调函数
for(var i = 0; i < _msg[type].length; i++) {
// 执行该回调函数
_msg[type][i] && _msg[type][i]() ;
}
}
}
}
})() ;

/* 单元测试开始 */
// 订阅demo消息，执行回调函数--输出first
Mediator.register('demo', function() {
console.log('firsh') ;
}) ;
// 订阅demo消息，执行回调函数--输出second
Mediator.register('demo', function() {
console.log('second') ;
}) ;
// 发布demo消息
Mediator.send('demo') ;
/* 单元测试结束 */

// 订阅消息
/***
*   显隐导航小组件
*   参数 mod          模块
*   参数 tag          处理的标签（消息提醒b, 网址span）
*   参数 showOrHide       显示还是隐藏
****/
var showHideNavWidget = function(mod, tag, showOrHide) {
// 获取导航模块
var _mod = document.getElementById(mod) ;
// 获取下面的标签名为tag的元素
var _tag = _mod.getElementsByTagName(tag) ;
// 如果设置为false或者为hide则值为hidden，否则为visible
var _showOrHide = (!showOrHide || showOrHide == 'hide') ? 'hidden' : 'visible' ;
// 占位隐藏这些标签
for(var i = 0; i < _tag.length; i++) {
_tag[i].style.visibility = _showOrHide ;
}
}

// showHideNavWidget('collection_nav', 'b', false) ;

// 用户收藏导航模块
// (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('showAllNavUrl', 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') ;
// 网址选框
var 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') ;
}
}
// })() ;

</script>

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 设计模式中介者模式
相关文章推荐
新的分享
章节导航