js之中介模式

最新推荐文章于 2023-12-04 10:00:00 发布

linhongyong

最新推荐文章于 2023-12-04 10:00:00 发布

阅读量433

点赞数

分类专栏：设计模式文章标签： javascript 模式中介者模式

本文链接：https://blog.csdn.net/linhongyong/article/details/53439723

版权

设计模式专栏收录该内容

12 篇文章 1 订阅

订阅专栏

购买商品

假设我们正在编写一个手机购买的页面，在购买流程中，可以选择手机的颜色以及输入购买数量，同时页面中有两个展示区域，分别向用户展示刚刚选择好的颜色和数量。还有一个按钮动
态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次的购买数量，按钮将被禁用并且显示库存不足，反之按钮可以点击并且显示放入购物车。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    选择颜色: <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select><br/>
    输入购买数量: <input type="text" id="numberInput"/><br/><br/>
    您选择了颜色: <div id="colorInfo"></div><br/>
    您输入了数量: <div id="numberInfo"></div><br/>
    <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
    <script>
        var colorSelect = document.getElementById( 'colorSelect' ),
            numberInput = document.getElementById( 'numberInput' ),
            colorInfo = document.getElementById( 'colorInfo' ),
            numberInfo = document.getElementById( 'numberInfo' ),
            nextBtn = document.getElementById( 'nextBtn' );
        var goods = { // 手机库存
            "red": 3,
            "blue": 6
        };
        colorSelect.onchange = function(){
            var color = this.value, // 颜色
                number = numberInput.value, // 数量
                stock = goods[ color ]; // 该颜色手机对应的当前库存
            colorInfo.innerHTML = color;
            if ( !color ){
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请选择手机颜色';
                return;
            }
            if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 用户输入的购买数量是否为正整数
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请输入正确的购买数量';
                return;
            }
            if ( number > stock ){ // 当前选择数量没有超过库存量
                nextBtn.disabled = true;
                nextBtn.innerHTML = '库存不足';
                return ;
            }
            nextBtn.disabled = false;
            nextBtn.innerHTML = '放入购物车';
        };

        numberInput.oninput = function(){
            var color = colorSelect.value, // 颜色
                number = this.value, // 数量
                stock = goods[ color ]; // 该颜色手机对应的当前库存
            numberInfo.innerHTML = number;
            if ( !color ){
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请选择手机颜色';
                return;
            }
            if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 输入购买数量是否为正整数
                nextBtn.disabled = true;
                nextBtn.innerHTML = '请输入正确的购买数量';
                return;
            }
            if ( number > stock ){ // 当前选择数量没有超过库存量
                nextBtn.disabled = true;
                nextBtn.innerHTML = '库存不足';
                return ;
            }
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
};
</script>
</body>
</html>

运用中介模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    选择颜色: <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select>
    选择内存: <select id="memorySelect">
        <option value="">请选择</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>
    输入购买数量: <input type="text" id="numberInput"/><br/>
    您选择了颜色: <div id="colorInfo"></div><br/>
    您选择了内存: <div id="memoryInfo"></div><br/>
    您输入了数量: <div id="numberInfo"></div><br/>
    <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
    <script>
        var goods = { // 手机库存
            "red|32G": 3,
            "red|16G": 0,
            "blue|32G": 1,
            "blue|16G": 6
        };
        var mediator = (function(){
            var colorSelect = document.getElementById( 'colorSelect' ),
                memorySelect = document.getElementById( 'memorySelect' ),
                numberInput = document.getElementById( 'numberInput' ),
                colorInfo = document.getElementById( 'colorInfo' ),
                memoryInfo = document.getElementById( 'memoryInfo' ),
                numberInfo = document.getElementById( 'numberInfo' ),
                nextBtn = document.getElementById( 'nextBtn' );
            return {
                changed: function( obj ){
                    var color = colorSelect.value, // 颜色
                        memory = memorySelect.value,// 内存
                        number = numberInput.value, // 数量
                        stock = goods[ color + '|' + memory ]; // 颜色和内存对应的手机库存数量
                    if ( obj === colorSelect ){ // 如果改变的是选择颜色下拉框
                        colorInfo.innerHTML = color;
                    }else if ( obj === memorySelect ){
                        memoryInfo.innerHTML = memory;
                    }else if ( obj === numberInput ){
                        numberInfo.innerHTML = number;
                    }
                    if ( !color ){
                        nextBtn.disabled = true;
                        nextBtn.innerHTML = '请选择手机颜色';
                        return;
                    }
                    if ( !memory ){
                        nextBtn.disabled = true;
                        nextBtn.innerHTML = '请选择内存大小';
                        return;
                    }
                    if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 输入购买数量是否为正整数
                        nextBtn.disabled = true;
                        nextBtn.innerHTML = '请输入正确的购买数量';
                        return;
                    }
                    nextBtn.disabled = false;
                    nextBtn.innerHTML = '放入购物车';
                }
            }
        })();
        // 事件函数：
        colorSelect.onchange = function(){
            mediator.changed( this );
        };
        memorySelect.onchange = function(){
            mediator.changed( this );
        };
        numberInput.oninput = function(){
            mediator.changed( this );
        };
    </script>
</body>
</html>

小结

中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则，是指一个对象应该尽可能少地了解另外的对象（类似不和陌生人说话）。如果对象之间的耦合性太高，一个对象发生改变之后，难免会影响到其他的对象，跟“城门失火，殃及池鱼”的道理是一样的。而在中介者模式里，对象之间几乎不知道彼此的存在，它们只能通过中介者对象来互相影响对方。

因此，中介者模式使各个对象之间得以解耦，以中介者和对象之间的一对多关系取代了对象之间的网状多对多关系。各个对象只需关注自身功能的实现，对象之间的交互关系交给了中介者对象来实现和维护。

中介者模式可以非常方便地对模块或者对象进行解耦，但对象之间并非一定需要解耦。在实际项目中，模块或对象之间有一些依赖关系是很正常的。毕竟我们写程序是为了快速完成项目交付生产，而不是堆砌模式和过度设计。关键就在于如何去衡量对象之间的耦合程度。一般来说，如果对象之间的复杂耦合确实导致调用和维护出现了困难，而且这些耦合度随项目的变化呈指数增长曲线，那我们就可以考虑用中介者模式来重构代码。

linhongyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之中介模式

购买商品假设我们正在编写一个手机购买的页面，在购买流程中，可以选择手机的颜色以及输入购买数量，同时页面中有两个展示区域，分别向用户展示刚刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次的购买数量，按钮将被禁用并且显示库存不足，反之按钮可以点击并且显示放入购物车。<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫

专栏目录