JavaScript中介者模式
2021-01-03 本文已影响0人
晓蟲QwQ
当对象之间进行多对多引用时，进行开发，维护，阅读时将变得特别痛苦。在这些对象之间添加中间者，使它们都只与中介者，当中介者处理完一个对象的请求后，将结果通知于其他对象。
实现改动页面一处地方，其他地方做出相应变化
<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>
</body>
<script type="text/javascript">
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
memoryInfo = document.getElementById('memoryInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
"red|32G": 3,
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
}
//中介者
var mediator = (function(){
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
memoryInfo = document.getElementById('memoryInfo'),
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.isInteger( number - 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>
