JavaScript经常使用设计模式

原文连接： JavaScript经常使用设计模式

设计模式

设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。

设计模式主要分为3类：

建立型设计模式：专一于处理对象的建立

Constructor构造器模式，Factory工厂模式，Singleton单例模式，builder生成器模式

结构型设计模式：对象间组合，创建对象之间的关系

Decorator装饰者模式，Facade外观模式，Flyweight享元模式，Adapter适配器模式，Proxy代理模式

行为设计模式：简化和改善对象间的通讯

Mediator中介者模式，Observer观察者模式

经常使用的设计模式

1. 观察者模式

一个目标对象维持着一系列依赖于它的对象，将有关状态的任何变动自动通知观察者们。在观察者模式中，观察者须要直接订阅目标对象，观察者与目标对象之间有必定的依赖关系。
有4个重要的概念

• 目标对象（被观察者）：维护一组观察患者，提供管理观察者的方法。
• 观察者： 提供一个更新接口，用于收到通知时，进行更新
• 具体目标对象：表明具体的目标对象
• 具体观察者：表明具体的观察者

// 目标对象
class Subject {
  constructor() {
    // 观察者列表
    this.observers = []
  }
  addObserver(observer) {
    this.observers.push(observer)
  }
  removeObserver() {
    this.observers.pop()
  }
  notify() {
    this.observers.forEach(observer => {
      observer.update()
    })
  }
}

// 观察者
class Observer {
  constructor() {
    // 使用时会被具体update方法覆盖
    this.update = function () {
        // ..
    }
  }
}

// 具体目标对象
class currentSubject extends Subject {
  constructor() {
    super()    
  }
  // 其余自定义方法
  dosomething() {
    console.log('currentSubject change')
    this.notify()
  }
}
// 具体观察者
class currentObserver extends Observer {
    constructor() {
        super()
    }
    // 重写update
    update() {
        console.log('change!')
    }
}

// 订阅
let curSubject = new currentSubject()
let curObserver = new currentObserver()
curSubject.addObserver(curObserver)
// 触发
curSubject.dosomething()
// currentSubject change

2.发布/订阅模式

发布订阅模式能够说是观察这模式的一种变体，一种实现。它使用一个主题/事件通道，介于发布者和订阅者之间，避免了发布者和订阅者之间的依赖关系。

class PubSub {
  constructor() {
// 主题/事件通道
    this.topics = {}
  }
  publish(topic, args) {
    if (!this.topics[topic]) {
      return
    }
    let subscribers = this.topics[topic]
    subscribers.forEach(subscriber => {
        subscriber.updata(args)
    })
  }
  subscribe(topic, subscriber ) {
    if (!this.topics[topic]) {
      this.topics[topic] = []
    }
    this.topics[topic].push(subscriber )
  }
}

let pubsub = new PubSub()

pubsub.subscribe('one', subscriber )

pubsub.publish('one', 'some args')

3. 工厂模式

工厂函数提供一个通用的接口来建立对象，咱们能够指定咱们但愿建立的对象类型，咱们通知工厂函数须要什么类型的对象并提供对应的数据，返回对应的实例。

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

function vehicleFactory (options) {
  if (options.type === 'car') {
    return new Car(options)  
  } else {
    return new Truck(options)
  }
}

什么时候使用工厂模式

• 当咱们的对象比较复杂的时候。
• 当咱们须要根据不一样状况建立不一样对象实例的时候。
• 当咱们须要建立许多类似对象的时候。

缺点

• 使用不当会增长程序的复杂度

4. 抽象工厂模式

抽象工厂模式，将对象的实现细节抽离出来。适用于须要和多种对象一块儿工做的场景。

class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class AbstractFactory {
  constructor() {
    this.types = {}
  }
  registerFactory(type, factory) {
    this.types[type] = factory
  }
  getInstance(type, args) {
    let factory = this.types[type]
    if (factory) {
      return new factory(args)
    }
  }
}

let abstractFactory = new AbortController()
abstractFactory.registerFactory('car', Car)
abstractFactory.registerFactory('truck', Truck)

abstractFactory.getInstance('car', options)
abstractFactory.getInstance('truck', options)

5. 单例模式

单例模式限制一个类只有一个实例化对象。

class Obj(data) {
  // ....
}
// 利用闭包实现单例模式，确保obj类只有一个实例
function singleton (data) {
  var instance;
  return function () {
    if (!instance) {
      instance = new Obj(data)
    }
    return instance
  }
}

6. 中介者模式

中介者模式就是提供一个中心点给系统不一样组件之间进行通讯，下降系统组件之间的耦合程度。

// 实现与发布/订阅模式相似

观察者模式和发布订阅模式专一于维护目标对象和观察者之间的关系，当主题对象发送变化时，通知全部对改主题感兴趣的观察者。而中介者模式的话，专一于限制对象的通讯必须经过中介者来通讯。二者都提倡松耦合。

7. 装饰者模式

装饰者模式，经过一个装饰类对现有动态添加行为，以及对原有行为进行装饰。

// o为已有对象
    var M20 = function(o){    // 这里定义一个装饰类
        var str = '20多岁的时候,';
        // o是传入的对象，调用传入对象的方法，加以装饰
        this.eat = function(){
            return str + o.eat()+",肥得很！";
        };
        this.drink = function(){
            return str + o.drink()+",就是个水桶！";
        };
        this.coding = function(){
            return str + o.coding()+",代码又写得撇！";
        };
    }
    alert(new M20(david).eat());    // 20多岁的时候,大卫是个大胖子，一天只晓得吃,肥得很！
    alert(new M20(david).drink());    // 20多岁的时候,大卫除了吃就是喝,就是个水桶！
    alert(new M20(david).coding());    // 20多岁的时候,写代码吧，大卫,代码又写得撇！

8. 适配器模式

使用一个新的接口对现有的接口进行包装，处理数据与接口的不匹配。

function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log来模拟接口的相关操做
}

var data = {
  a: '我',
  b: '很',
  c: '帅'
}

function adapterApi (o) {
  // 经过适配器函数来调用目的api
  api(o.a, o.b, o.c);
} 

adapterApi(data);
// 我很帅

学习资料：
听飞狐聊JavaScript设计模式系列
javascript设计模式
汤姆大叔