极乐门资源网 Design By www.ioogu.com
一、定义
面向对象设计鼓励将行为分布到各个对象中,把对象划分成更小的粒度,有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增,又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
二、示例:购买商品
- 假设我们正在开发一个购买手机的页面,购买流程中,可以选择手机颜色以及输入购买数量,同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作(该颜色库存量充足,显示下一步;否则显示库存不足)。
<div> <span>请选择颜色</span> <select id="selColor"> <option value="roseGold">玫瑰金</option> <option value="luxuryGold">土豪金</option> </select> </div> <div> <span>请输入购买数量:</span> <input type="text" id="selNum" /> </div> <div> <span>您选择的颜色为:</span><strong id="conColor"></strong> <span>您选择的数量为:</span><strong id="conNum"></strong> </div> <button id="nextBtn">加入购物车</button>
// 库存量 var goods = { roseGold: 10, luxuryGold: 10 }; var colorSelect = document.getElementById("selColor"), numberInput = document.getElementById("selNum"), colorInfo = document.getElementById("conColor"), numberInfo = document.getElementById("conNum"), nextBtn = document.getElementById("nextBtn"); colorSelect.onchange = function() { var color = colorSelect.value, // 颜色 number = +numberInput.value, // 数量 stock = goods[color]; // 对应颜色的库存量 colorInfo.innerHTML = color; if(!color) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机颜色"; return; } if(!number || (((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 = "加入购物车"; }; /* 购买数量做同样处理 */
当页面中新增加另外一个下拉列表框,代表手机内存,上述代码改动面很大。
三、引入中介模式
所有的节点对象只跟中介者通信。
当下拉选择框selColor、selMemory亦或文本框selNum发生了事件行为时,仅通知中介者它们被改变了,同时把自己当做参数传入中介者,以便中介者辨别是谁发生了改变,剩下的事情交给中介者对象来完成。
<div> <span>请选择颜色:</span> <select id="selColor"> <option value="roseGold">玫瑰金</option> <option value="luxuryGold">土豪金</option> </select> </div> <div> <span>请选择内存:</span> <select id="selMemory"> <option value="16G">16G</option> <option value="64G">64G</option> </select> </div> <div> <span>请输入购买数量:</span> <input type="text" id="selNum" /> </div> <div> <span>您选择的颜色为:</span><strong id="conColor"></strong> <span>您选择的内存为:</span><strong id="conMemory"></strong> <span>您选择的数量为:</span><strong id="conNum"></strong> </div> <button id="nextBtn">加入购物车</button>
// 库存量 var goods = { "roseGold|16G": 10, "roseGold|32G": 10, "luxuryGold|16G": 10, "luxuryGold|32G": 10 }; var colorSelect = document.getElementById("selColor"), memorySelect = document.getElementById("selMemory"), numberInput = document.getElementById("selNum"), colorInfo = document.getElementById("conColor"), memeryInfo = document.getElementById("conMemory"), numberInfo = document.getElementById("conNum"), nextBtn = document.getElementById("nextBtn"); var mediator = (function() { 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) { memeryInfo.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 || (((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); }
中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则,是指一个对象应该尽可能少地了解另外的对象。避免“城门失火,殃及鱼池”。
缺点:最大的缺点是系统中会增加一个中介对象,因为对象之间交互的复杂性,转移成了中介对象的复杂性,使得中介者对象经常是巨大的,很难维护。
一般来说,如果对象之间的复杂耦合确实导致调用和维护出现了困难,而且这些耦合度随项目的变化呈指数增长,那么我们可以考虑用中介者模式来重构代码。
希望本文所述对大家学习javascript程序设计有所帮助。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无学习JavaScript设计模式之中介者模式的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 张敬轩2005《我的梦想我的路》几何娱乐[WAV+CUE][1G]
- 群星《人到四十男儿情(SRS+WIZOR)》[原抓WAV+CUE]
- 马久越《上善若水HQCDII》[低速原抓WAV+CUE]
- 龚玥《女儿情思》6N纯银SQCD【WAV+CUE】
- 张惠妹《你在看我吗》大碟15 金牌大风[WAV+CUE][1G]
- 群星《左耳·听见爱情》星文唱片[WAV+CUE][1G]
- 群星《抖音嗨疯-DISCO英文版》[WAV+CUE][1G]
- 群星.1990-情义无价(TP版)【中唱】【WAV+CUE】
- 马兆骏.1990-心情·七月【滚石】【WAV+CUE】
- 方伊琪.1979-沙鸥(LP版)【星岛全音】【WAV+CUE】
- 蔡琴《醇厚嗓音》6N纯银SQCD【WAV+CUE】
- 陈曦《遇见HQCD》[WAV+CUE]
- 大提琴-刘欣欣《爱的问候》HDCD[WAV+CUE]
- 周耀辉/邓慧中《从什么时候开始》[320K/MP3][95.71MB]
- 周耀辉/邓慧中《从什么时候开始》[FLAC/分轨][361.29MB]