这篇文章主要介绍“javascript中介者模式的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“javascript中介者模式的代码怎么写”文章能帮助大家解决问题。

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。

需求背景：

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>中介者模式购买商品</title></head><body>选择颜色：<selectid="colorSelect"><optionvalue="">请选择</option><optionvalue="red">红色</option><optionvalue="blue">蓝色</option></select>输入购买数量：<inputtype="text"id="numberInput">您选择了颜色：<divid="colorInfo"></div><br>您输入了数量：<divid="numberInfo"></div><br><buttonid="nextBtn"disabled>请选择手机颜色和购买数量</button></body><script>//最初级的写法varcolorSelect=document.getElementById('colorSelect'),numberInput=document.getElementById('numberInput'),colorInfo=document.getElementById('colorInfo'),numberInfo=document.getElementById('numberInfo'),nextBtn=document.getElementById('nextBtn');vargoods={'red':3,'blue':6}colorSelect.onchange=function(){varcolor=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(){varcolor=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){//用户输入的购买数量是否为正整数nextBtn.disabled=true;nextBtn.innerHTML='请输入正确的购买数量';return;}if(number>stock){//当前选择数量大于库存量nextBtn.disabled=true;nextBtn.innerHTML='库存不足';return;}nextBtn.disabled=false;nextBtn.innerHTML='放入购物车';}</script></html>

在上个示例中，对象间联系高度耦合，只是两个输入框还好，但如果有多个的话，相互联系就非常复杂了，此时就要考虑用到中介者模式。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>中介者模式购买商品</title></head><body>选择颜色：<selectid="colorSelect"><optionvalue="">请选择</option><optionvalue="red">红色</option><optionvalue="blue">蓝色</option></select>选择内存：<selectid="memorySelect"><optionvalue="">请选择</option><optionvalue="32G">32G</option><optionvalue="16G">16G</option></select>输入购买数量：<inputtype="text"id="numberInput">您选择了颜色：<divid="colorInfo"></div><br>您选择了内存：<divid="memoryInfo"></div><br>您输入了数量：<divid="numberInfo"></div><br><buttonid="nextBtn"disabled>请选择手机颜色、内存和购买数量</button></body><script>vargoods={'red|32G':3,'red|16G':0,'blue|32G':1,'blue|16G':6}//引入中介者varmediator=(function(){varcolorSelect=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){varcolor=colorSelect.value,memory=memorySelect.value,number=numberInput.value,stock=goods[color+'|'+memory];if(obj==colorSelect){//如果改变的是选择颜色下拉框colorInfo.innerHTML=color;}elseif(obj==memorySelect){memoryInfo.innerHTML=memory;}elseif(obj==numberInput){numberInfo.innerHTML=number;}if(!color){nextBtn.disabled=true;nextBtn.innerHTML='请选择手机颜色';return;}if(!memory){nextBtn.disabled=true;nextBtn.innerHTML='请选择手机内存';return;}if(!number){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='放入购物车';}}})()colorSelect.onchange=function(){mediator.changed(this)}memorySelect.onchange=function(){mediator.changed(this)}numberInput.oninput=function(){mediator.changed(this)}//以后如果想要再增加选项，如手机CPU之类的，只需在中介者对象里加上相应配置即可。</script></html>

在实际开发中，还是要注意选择利弊，中介者对象因为包含对象间交互的复杂性，所以维护成本可能也会较高。在实际开发中，最优目的还是要快速完成项目交付，而非过度设计和堆砌模式。有时对象间的耦合也是有必要的，只有当对象间复杂耦合确实已经导致调用与维护难以为继，才考虑用中介者模式。

关于“javascript中介者模式的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。