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

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

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

相关推荐
北海-cherish4 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch5 小时前
网球馆自动预约系统的反调试
javascript·网络
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。7 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡7 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友8 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue