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

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

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

相关推荐
gustt几秒前
JS 变量那些坑:从 var 到 let/const 的终极解密
前端·javascript
十年_H3 分钟前
Cesium自定义着色器-模式
javascript·cesium
shuaijie051812 分钟前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L16 分钟前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
柳鲲鹏29 分钟前
多种方法:OpenCV中修改像素RGB值
前端·javascript·opencv·1024程序员节
WaWaJie_Ngen35 分钟前
【设计模式】装饰器模式(Decorator)
设计模式·装饰器模式
YuanlongWang43 分钟前
C# 设计模式——观察者
windows·设计模式·c#
亿牛云爬虫专家1 小时前
中间件实现任务去重与精细化分发:设计模式与常见陷阱
设计模式·中间件·爬虫代理·数据抓取·商品信息·数据去重·电商搜索
爱怪笑的小杰杰1 小时前
Cesium中的倒立四棱锥:从几何结构到交互式3D可视化
javascript·3d·arcgis·1024程序员节
不会算法的小灰2 小时前
JavaScript基础详解
开发语言·javascript·udp