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

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

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

相关推荐
山河木马13 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina14 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
鸡蛋灌Bean15 分钟前
Java常用设计模式大全
java·开发语言·设计模式
喝可乐的布偶猫15 分钟前
Java-----韩顺平单例设计模式学习笔记
java·笔记·设计模式
WISHMELUCK1'17 分钟前
设计模式的六大设计原则
设计模式·接口隔离原则·依赖倒置原则·里氏替换原则·迪米特法则·合成复用原则·单一职责原则
前端进阶者21 分钟前
天地图编辑支持删除编辑点
前端·javascript
前端小巷子44 分钟前
深入理解TCP协议
前端·javascript·面试
开开心心就好2 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人3 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Hellyc8 小时前
基于模板设计模式开发优惠券推送功能以及对过期优惠卷进行定时清理
java·数据库·设计模式·rocketmq