亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

javascript設計模式九:中介者模式

2020-3-1    前端達人

中介者對象踐行了最少知識原則,指一個對象盡可能少的了解別的對象,從而盡量減少對象間耦合程度。這樣各個對象只需關注自身實現(xiàn)邏輯,對象間的交互關系交由中介者對象來實現(xiàn)和維護。



需求背景:



手機購買頁面,在購買流程中,可以選擇手機的顏色及輸入購買數(shù)量,同時頁面有兩個展示區(qū)域,分別向用戶展示剛選擇好的顏色和數(shù)量。還有一個按鈕動態(tài)顯示下一步的操作,我們需要查詢該顏色手機對應的庫存,如果庫存數(shù)量少于這次購買的數(shù)量,按鈕將被禁用并顯示庫存不足,反之按鈕可以點擊并顯示放入購物車。

<!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>中介者模式 購買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍色</option>
    </select>

    輸入購買數(shù)量:
    <input type="text" id="numberInput">

    您選擇了顏色:<div id="colorInfo"></div><br>
    您輸入了數(shù)量:<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>請選擇手機顏色和購買數(shù)量</button>

</body>
<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 ){      //用戶輸入的購買數(shù)量是否為正整數(shù)
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請輸入正確的購買數(shù)量';
        return;
    }

    if(number > stock){     //當前選擇數(shù)量大于庫存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '庫存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購物車';
}

numberInput.oninput = function(){
    var color = colorSelect.value,
        number = this.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請選擇手機顏色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用戶輸入的購買數(shù)量是否為正整數(shù)
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請輸入正確的購買數(shù)量';
        return;
    }

    if(number > stock){     //當前選擇數(shù)量大于庫存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '庫存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入購物車';
}

</script>
</html>

在上個示例中,對象間聯(lián)系高度耦合,只是兩個輸入框還好,但如果有多個的話,相互聯(lián)系就非常復雜了,此時就要考慮用到中介者模式。

<!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>中介者模式 購買商品</title>
</head>
<body>
    選擇顏色: 
    <select id="colorSelect">
        <option value="">請選擇</option>
        <option value="red">紅色</option>
        <option value="blue">藍色</option>
    </select>

    選擇內(nèi)存: 
    <select id="memorySelect">
        <option value="">請選擇</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    輸入購買數(shù)量:
    <input type="text" id="numberInput">

    您選擇了顏色:<div id="colorInfo"></div><br>
    您選擇了內(nèi)存:<div id="memoryInfo"></div><br>
    您輸入了數(shù)量:<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>請選擇手機顏色、內(nèi)存和購買數(shù)量</button>
</body>
<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 = '請選擇手機內(nèi)存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請?zhí)顚懯謾C數(shù)量';
                    return;
                }

                if( ( (number-0) | 0 ) !== number-0 ){      //用戶輸入的購買數(shù)量是否為正整數(shù)
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '請輸入正確的購買數(shù)量';
                    return;
                }

                if(number > stock){     //當前選擇數(shù)量大于庫存量
                    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)
    }

    //以后如果想要再增加選項,如手機CPU之類的,只需在中介者對象里加上相應配置即可。
</script>
</html>
在實際開發(fā)中,還是要注意選擇利弊,中介者對象因為包含對象間交互的復雜性,所以維護成本可能也會較高。在實際開發(fā)中,最優(yōu)目的還是要快速完成項目交付,而非過度設計和堆砌模式。有時對象間的耦合也是有必要的,只有當對象間復雜耦合確實已經(jīng)導致調用與維護難以為繼,才考慮用中介者模式。

————————————————
版權聲明:本文為CSDN博主「一期一會」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權協(xié)議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_34832846/article/details/85989945

日歷

鏈接

個人資料

藍藍設計的小編 http://www.chinatradebeam.com

存檔

久久精品国产一区二区三区| 高洁在公车被灌满jing液| 亚洲av永久中文无码精品综合| 亚洲AV区无码字幕中文色| 御书屋御宅屋高辣h| chinese熟女老女人hd| 国产中老年妇女精品| 精品人妻一区二区三区四区在线| 粗大抽搐白浊h高干h| 国产精品99久久精品爆乳| 99久久国产热无码精品免费 | 国产成人免费视频| 国产精品久久久久久久久免费 | 亚洲中文字幕无码专区| 国产午夜精品无码| 妈妈的朋友在线观看| 性做久久久久久久| 粗大的内捧猛烈进出a片| 麻豆国产尤物av尤物在线观看| 内射人妻无码色AV麻豆| 亚洲人成网站观看在线播放 | 成人激情五月天| 日韩乱码人妻无码中文字幕| 无码AV中文一区二区三区桃花岛 | 风流少妇又紧又爽又丰满 | 人妻被黑人猛烈进入a片| 御书房双乳晃动干柴烈| 亚洲精品白浆高清久久久久久| 国产一区二区三区成人欧美日韩在线观看 | 五月丁香综合激情六月久久| 国内精品久久久久久久影视麻豆| 国产成人精品免高潮在线观看| 亚洲av无码av日韩av网站| 九九精品国产亚洲av日韩| 国产成人精品久久| 狮王的巨大挺进体内h| 性xxxx18免费观看视频| 业余 自由 性别 视频 视频| 伊人久久大香线蕉AV一区二区| 国产精品成人国产乱| 少妇一夜三次一区二区|