前端中的设计模式 JavaScript

最近再准备秋招，然后顺便把过去空白的设计模式相关概念补一补，这些内容都是从《JavaScript设计模式与开发实践》一书中整理出来的

（1）单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

适用场景：一个单一对象。比如：登录弹窗，无论点击多少次，登录弹窗只会被创建一次

简单版实现方法：判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。 拓展：

透明的单例模式：解决了简单单例的不透明性，使用者需知道其是一个单例对象才能进行获取

代理实现单例模式：创建单例和管理单例逻辑分开，管理单例逻辑放在代理类中

惰性单例技术：合适的时候才创建对象，并且只创建唯一的一个

JavaScript中的单例：全局变量当成单例来使用，缺点：命名空间污染

（2）策略模式

定义：将一个个算法（解决方案）封装在一个个策略类中，并且使他们可以相互替换

特点：一个基于策略模式的算法至少由两部分组成，一部分是策略类，封装了具体算法负责计算过程，另一部分是环境类，接受客户请求，将请求托付给某一个策略类

优点：

• 策略模式可以避免代码中的多重判断条件。

• 策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。

• 策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。

• 策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。

• 违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。

  应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。

（3）代理模式

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）

（4）迭代器模式

//TODO

（5）发布/订阅模式

定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景：订阅感兴趣的专栏和公众号。

实现方法：

• 先指定好发布者

• 给发布者加一个缓存列表，用于存储回调函数通知订阅者

• 发布消息时，遍历缓存列表，触发存放的订阅者回调函数

  简单版代码实现：

  let event = {
    clientList: [],
    listen: function(key, fn) {
      if (!this.clientList[key]) {
        //  如果没有订阅过此类消息，则给该类消息创建一个缓存列表
        this.clientList[key] = []
      }
      this.clientList[key].push(fn)
    },
    trigger: function() {
      // 取第一个参数,即key值
      const key = Array.prototype.shift.call(arguments)
      const fns = this.clientList[key]
      //  如果没有订阅该消息则返回
      if (!fns || fns.length === 0) {
        return false
      }
      //  遍历列表
      for (var i = 0, fn; (fn = fns[i]); i++) {
        fn.apply(this, arguments)
      }
    },
    remove: function(key, fn) {
      //  取消订阅
      let fns = this.clientList[key]
      if (!fns) {
        return flase
      }
      if (!fn) {
        // 如果key对应的消息没人订阅则直接返回
        fns && (fns.length = 0)
      } else {
        for (let l = fns.length - 1; l >= 0; l--) {
          let _fn = fns[l]
          if (_fn === fn) {
            fns.splice(l, 1)
          }
        }
      }
    },
  }
  ​
  let salesOffices = {}
  installEvent(salesOffices)
  salesOffices.listen('123', fn1 = function(squareMeter)  {
    console.log('面积为1：', squareMeter)
  })
  salesOffices.listen('123', fn2 = function(squareMeter) {
    console.log('面积为2：', squareMeter)
  })
  salesOffices.trigger('123', fn1)
  salesOffices.remove('123',fn1)
  salesOffices.trigger('123', fn1)
   
  
   

   

（6）中介者模式

定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景： 例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

（7）装饰者模式

定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。

应用场景： 有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。

参考书籍：JavaScript设计模式与开发实践 曾探