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

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

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

相关推荐
陈皮话梅糖@4 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~8 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克8 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
dr李四维8 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久8 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
牵牛老人9 小时前
C++设计模式-责任链模式:从基本介绍,内部原理、应用场景、使用方法,常见问题和解决方案进行深度解析
c++·设计模式·责任链模式
朴拙数科9 小时前
技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程
javascript·重构·es6
肥仔哥哥193010 小时前
设计模式分类与定义(高软55)
设计模式·软考·高软·设计模式分类
拉不动的猪10 小时前
vue与react的简单问答
前端·javascript·面试