JavaScript 设计模式之访问者模式

访问者模式

将一些必要的方法统一封装在一个对象中管理起来

假使我们有以下对象，提供了 splice、push、pop 三个方法，都基于 Array 来实现

javascript 复制代码

const Visitor = (() => {
  return {
    splice() {
      let args = Array.prototype.splice.call(arguments, 1);
      return Array.prototype.splice.apply(arguments[0], args);
    },
    push() {
      let len = arguments[0].length || 0;
      let args = this.splice(arguments, 1);
      arguments[0].length = len + arguments.length - 1
      return Array.prototype.push.apply(arguments[0], args);
    },
    pop() {
      return Array.prototype.pop.apply(arguments[0]);
    },
    toString() {
      return Array.prototype.toString.call(arguments[0]);
    }
  }
})();

可以这样使用

javascript 复制代码

let obj = {}
Visitor.push(obj, 2, 3, 4)
console.log(obj) // { '0': 2, '1': 3, '2': 4 }
console.log(obj.length) // 3

Visitor.pop(obj)
console.log(obj) // { '0': 2, '1': 3 }

访问者模式解决数据与数据的操作方法之间的耦合，将数据的操作方法独立于数据，使其可以自由化演变。因此访问者更适合于那些数据稳定，但是数据的操作方法易变的环境下。因此当操作环境改变时，可以自由修改操作方法以适应操作环境，而不用修改原数据，实现操作方法的拓展。

中介者模式

通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。有时中介者对象也可改变对象之间的交互。

javascript 复制代码

const Mediator = (() => {
  const _msg = {}
  return {
    register(key, action) {
      if (!_msg[key]) {
        _msg[key] = []
        _msg[key].push(action)
      } else {
        _msg[key].push(action)
      }
    },
    send(key, ...args) {
      if (_msg[key]) {
        _msg[key].forEach(item => item(...args))
      }
    }
  }

})()

定义了一个中介者，其与观察-订阅者类似

注册事件

javascript 复制代码

Mediator.register('test', function () {
  console.log('first test')
})
Mediator.register('test', function () {
  console.log('second test')
})
// 发布事件
Mediator.send('test')


// first test
// second test

与外观模式的封装特性相比，中介模式对多个对象交互地封装，且这些对象一般处于同一层面上，并且封装的交互在中介者内部，而外观模式封装的目的是为了提供更简单的易用接口，而不会添加其他功能。

与观察者模式相比，虽然两种模式邵是通过消息传递实现对象间或模块间的解耦。观察者息的发布者，也可以是消息的订阅者。而在中介者模式模式中的订阅者是双向的，订阅者是单向的，只能是消息的订者。而消息统一由中介者对象发布，所有的订阅者对象间接地被中介者管理。