摘要：原文鏈接常用設(shè)計模式設(shè)計模式設(shè)計模式是一種在長時間的經(jīng)驗與錯誤中總結(jié)出來可服用的解決方案。用來模擬接口的相關(guān)操作我很帥通過適配器函數(shù)來調(diào)用目的我很帥學(xué)習(xí)資料聽飛狐聊設(shè)計模式系列設(shè)計模式湯姆大叔

原文鏈接： JavaScript常用設(shè)計模式

設(shè)計模式是一種在長時間的經(jīng)驗與錯誤中總結(jié)出來可服用的解決方案。

創(chuàng)建型設(shè)計模式：專注于處理對象的創(chuàng)建

Constructor構(gòu)造器模式，F(xiàn)actory工廠模式，Singleton單例模式，builder生成器模式

結(jié)構(gòu)型設(shè)計模式：對象間組合，建立對象之間的關(guān)系

Decorator裝飾者模式，F(xiàn)acade外觀模式，F(xiàn)lyweight享元模式，Adapter適配器模式，Proxy代理模式

行為設(shè)計模式：簡化和改善對象間的通信

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

一個目標(biāo)對象維持著一系列依賴于它的對象，將有關(guān)狀態(tài)的任何變更自動通知觀察者們。在觀察者模式中，觀察者需要直接訂閱目標(biāo)對象，觀察者與目標(biāo)對象之間有一定的依賴關(guān)系。
有4個重要的概念

目標(biāo)對象（被觀察者）：維護一組觀察患者，提供管理觀察者的方法。

觀察者： 提供一個更新接口，用于收到通知時，進行更新

具體目標(biāo)對象：代表具體的目標(biāo)對象

具體觀察者：代表具體的觀察者

// 目標(biāo)對象
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 () {
        // ..
    }
  }
}

// 具體目標(biāo)對象
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)
// 觸發(fā)
curSubject.dosomething()
// currentSubject change

發(fā)布訂閱模式可以說是觀察這模式的一種變體，一種實現(xiàn)。它使用一個主題/事件通道，介于發(fā)布者和訂閱者之間，避免了發(fā)布者和訂閱者之間的依賴關(guān)系。

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")

工廠函數(shù)提供一個通用的接口來創(chuàng)建對象，我們可以指定我們希望創(chuàng)建的對象類型，我們通知工廠函數(shù)需要什么類型的對象并提供對應(yīng)的數(shù)據(jù)，返回對應(yīng)的實例。

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)
  }
}

何時使用工廠模式

當(dāng)我們的對象比較復(fù)雜的時候。

當(dāng)我們需要根據(jù)不同情況創(chuàng)建不同對象實例的時候。

當(dāng)我們需要創(chuàng)建許多相似對象的時候。

缺點

使用不當(dāng)會增加程序的復(fù)雜度

抽象工廠模式，將對象的實現(xiàn)細節(jié)抽離出來。適用于需要和多種對象一起工作的場景。

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)

單例模式限制一個類只有一個實例化對象。

class Obj(data) {
  // ....
}
// 利用閉包實現(xiàn)單例模式，確保obj類只有一個實例
function singleton (data) {
  var instance;
  return function () {
    if (!instance) {
      instance = new Obj(data)
    }
    return instance
  }
}

中介者模式就是提供一個中心點給系統(tǒng)不同組件之間進行通信，降低系統(tǒng)組件之間的耦合程度。

// 實現(xiàn)與發(fā)布/訂閱模式類似

觀察者模式和發(fā)布訂閱模式專注于維護目標(biāo)對象和觀察者之間的關(guān)系，當(dāng)主題對象發(fā)送變化時，通知所有對改主題感興趣的觀察者。而中介者模式的話，專注于限制對象的通信必須通過中介者來通信。兩者都提倡松耦合。

裝飾者模式，通過一個裝飾類對現(xiàn)有動態(tài)添加行為，以及對原有行為進行裝飾。

   // o為已有對象
    var M20 = function(o){    // 這里定義一個裝飾類
        var str = "20多歲的時候,";
        // o是傳入的對象，調(dià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多歲的時候,大衛(wèi)是個大胖子，一天只曉得吃,肥得很！
    alert(new M20(david).drink());    // 20多歲的時候,大衛(wèi)除了吃就是喝,就是個水桶！
    alert(new M20(david).coding());    // 20多歲的時候,寫代碼吧，大衛(wèi),代碼又寫得撇！

使用一個新的接口對現(xiàn)有的接口進行包裝，處理數(shù)據(jù)與接口的不匹配。

function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log來模擬接口的相關(guān)操作
}

var data = {
  a: "我",
  b: "很",
  c: "帥"
}

function adapterApi (o) {
  // 通過適配器函數(shù)來調(diào)用目的api
  api(o.a, o.b, o.c);
} 

adapterApi(data);
// 我很帥

學(xué)習(xí)資料：
聽飛狐聊JavaScript設(shè)計模式系列
javascript設(shè)計模式
湯姆大叔