JavaScript常用设计模式

点上方蓝字关注公众号「前端UpUp」

作者：holyZhengs

来源：https://segmentfault.com/a/1190000015437592

前言常用的设计模式

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设计模式