JS每日一题:设计模式-如何理解中介者模式?

深碍√TFBOYSˉ_ 2023-02-13 08:15 67阅读 0赞

#### 20190410期 ####

设计模式-如何理解中介者模式?

> 定义: 中介者模式（Mediator），用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互

把它理解成人人喊打的黑房产中介也没啥问题...把租户与房东解藕了..

##### 现实中的中介者 #####

中介者也被称为调停者，我们想象一下机场的指挥塔，如果没有指挥塔的存在，每一架飞机要和方圆百公里的所有飞机通信，才能确认航线以及飞行情况，现实中的情况是，每架飞机只需要跟指挥塔通信，指挥塔作为调停者，知道每一架飞机的飞行情况，所以它可以安排所有飞机的起降时间，及时做出航线调整

##### 代码中的中介者 #####

假设我们正在编写一个实时的表单验证的程序，有如下需求

*  当用户名未输入时输入密码将提示先输入用户名
 *  当密码未输入时输入确认密码将提示先输入密码
 *  当性别未选择时输入年龄将提示先选择性别
 *  当点击提交按钮的时候如果有其它项未项写就提示当前项不能为空

我们的实现伪代码如下

passwordInput.onchange = function(){
        if(!nameInput.value){
          return alert('请先输入用户名')
        }
      }
      repeatPasswordInput.onchange = function(){
        if(!nameInput.value){
          return alert('请先输入密码')
        }
      }
      ageInputInput.onchange = function(){
        if(!sexInput.value){
          return alert('请先选择性别')
        }
      }
      submit.onclick = function(){
        if(!nameInput.value){
          return alert('请先输入用户名')
        }
        if(!nameInput.value){
          return alert('请先输入密码')
        }
        if(!sexInput.value){
          return alert('请先选择性别')
        }
        ajax(...)
      }

虽然目前顺利完成了编码，但随之来的需求改变可能给我们带来麻烦，现在这个验证的节点还不算多，如果增加到10个或者更多，它们的关系可能变的错综复杂，现在我们来引入中介者对象，所有的节点验证都只跟中介者通信，这样一来，无论是修改还是新增验证节点，我们都只需要改变中介者对象里的代码

伪代码如下

var mediator = (function () {
      return {
        changed: function (obj) {
          if (obj === passwordInput && !nameInput.value) {
            return alert('请先输入用户名')
          }
          if (obj === repeatPasswordInput && !passwordInput.value) {
            return alert('请先输入密码')
          }
          if (obj === ageInputInput && !sexInput.value) {
            return alert('请先选择性别')
          }
        }
      }
    })()
    // 我们只需要通知中介者
    passwordInput.onchange = function () {
      mediator.changed(this)
    }
    repeatPasswordInput.onchange = function () {
      mediator.changed(this)
    }
    ageInputInput.onchange = function () {
      mediator.changed(this)
    }
    // 后面如果再增加其它节点验证我们只要需改动mediator对象就好
    var mediator = (function () {
      / .... /
      return {
        changed: function (obj) {
          // 增加城市验证
          if (obj === homeInputInput && !cityInput.value) {
            return alert('请先选择城市')
          }
        }
      }
    })()

#### 总结 ####

中介者模式用大白话翻译指的就是一个对象应该尽可能的了解另一个对象（类似不和陌生人说话）,如果对象之间的耦合性太高，一个对象发生改变之后，难免会影响到其它的对象，跟城门失火，殃及池鱼的道理是一样的，而在中介者模式里，对象之间几乎是不知道彼此存在的，它们只能通过中介者对象来相互影响

**最近答题**

[JS每日一题:设计模式-如何理解工厂模式?][JS_-]

[JS每日一题:设计模式-如何理解命令模式?][JS_- 1]

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

**关注「JS每日一题」，参与答题！**

![format_png][]

▲长按图片识别二维码

[JS_-]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c398cb674a8e7907320284f63b1514c28bb0c22de41359bed4aaade01d5080e4a1b8ff1f&idx=1&mid=2247483854&scene=21&sn=f810de019cfbc269f7e08ad9ccf2454e#wechat_redirect
[JS_- 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c387cb674a912ab4d19a038533db912c4b9d041631a3f27c989ae1cd2cd3ef5f1634aa57&idx=1&mid=2247483857&scene=21&sn=260b775e88dd97a3508fa7ae232834f7#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png