JavaScript设计模式(二十一)【中介者模式】

最新推荐文章于 2024-07-01 21:49:01 发布

转载最新推荐文章于 2024-07-01 21:49:01 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

本文探讨了中介者模式在Web应用中管理多个组件间交互的应用。通过一个导航组件的例子，展示了如何使用中介者模式来降低组件间的耦合度，实现更灵活的消息传递和状态管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="collection_nav">
    <b></b>
    <span></span>
</div>
<div id="recommend_nav">
    <b></b>
    <span></span>
</div>
<div id="recently_nav">
    <b></b>
    <span></span>
</div>
<input type="text" id="hide_num" value="1">
<input type="text" id="hide_url" value="1">
<script>
    // 中介者模式 通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。有时中介者对象也可以改变对象之间的交互。

    // 中介者对象 

    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, len = _msg[type].length; i < len; i++) {
                        // 执行该回调函数
                        _msg[type][i] && _msg[type][i]();
                    }
                }
            }
        }
    }();

    // // 单元测试 

    // Mediator.register('demo' , function () {
    //     console.log('first');
    // })

    // Mediator.register('demo' , function () {
    //     console.log('second');
    // })

    // Mediator.send('demo');


    // 显示导航小组件   参数 mod 模块 参数 tag 处理的标签（消息b 网址用 span） 参数 showOrHide 显示韩式影藏


    function showHideNavWidget(mod1, tag, showOrHide) {
        // 获取导航模块
        console.log(mod1);
        var mod = document.getElementById(mod1);
        // 获取下面标签为tag的元素

        var tags = mod.getElementsByTagName(tag),
            // 如果设置false或者为 hide 则值为hidden ,否则为visible
            showOrHide = (!showOrHide || showOrHide == 'hide') ? 'hidden' : 'visible';
        // 站位隐藏这些标签
        console.log(tags);
        for (var i = tags.length - 1; i >= 0; i--) {
            tags[i].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('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('hideAllNavUrl',
            function() {
                showHideNavWidget('recently_nav', 'span', 'show');
            });
    })();


    // 发布消息

    // 设置层模块

    (function() {
        // 消息提示选框
        var hideNum = document.getElementById('hide_num'),
            hideUrl = document.getElementById('hide_url');
        // 消息提醒选框事件
        console.log(hideNum);
        console.log(hideUrl);
        hideNum.onchange = function() {
            // 如果勾选
            console.log('ddd');
            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>

</html>