设计模式：创建型

摘要：创建型：单例、简单工厂、工厂方法、抽象工厂、建造者和原型
参考：
《设计模式之美》
JavaScript 设计模式核⼼原理与应⽤实践
Java设计模式：23种设计模式全面解析（超级详细）
JavaScript设计模式es6（23种)
23种设计模式——创建型设计模式（5种）
设计模式：可复用面向对象软件的基础
等等

单例模式

一个类只允许创建一个对象（或者实例），并提供一个访问它的全局访问点。单例模式想要做到的是，不管创建多少次，都只会返回第一次所创建的那唯一的一个实例，也就是说就需要构造函数具备判断自己是否已经创建过一个实例的能力（这个是最主要的）。从业务概念上，如果有些数据在系统中只应保存一份，那就比较适合设计为单例类，比如：配置信息、唯一递增 ID 号码生成器、全局弹框和 Vuex、Redux 中的 store 等。与单例模式相关的还有多例模式，就是限制好可以生成固定几个实例。
JavaScript 的单例模式按照判断逻辑的实现方法可以分为两类：
1、使用构造函数，把判断逻辑写入静态方法或者构造函数里
2、使用闭包，通过闭包实现私有变量和判断逻辑
单例模式的缺点：
1、仅有一个实例，有可能导致模块之间强耦合，不利于测试
2、如果后期需求变更，强耦合的代码改动比较大

示例

一、实现 Storage，使得该对象为单例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 静态方法
class Storage {
  constructor() {
    this.type = "静态方法"
  }
  static getInstance() {
    // 判断是否已经创建过实例
    if (!Storage.instance) {
      // 若这个唯一的实例不存在，那么先创建它，这里 new Storage() 可以根据具体业务修改为其他对象，那么以后调用的都是该对象
      Storage.instance = new Storage()
    }
    // 如果这个唯一的实例已经存在，则直接返回
    return Storage.instance
  }
}
// 使用
const storage1 = Storage.getInstance()
const storage2 = Storage.getInstance()
console.log(storage1 === storage2) // true

// 闭包
class StorageBase {
  constructor() {
    this.type = "闭包"
  }
}
const Storage = (function () {
  let instance = null
  return function () {
    // 判断自由变量是否为 null
    if (!instance) {
      // 如果为 null 则 new 出唯一实例
      instance = new StorageBase()
    }
    return instance
  }
})()
// 使用
const storage3 = new Storage() // 这里有没有 new 都一样，因为返回的是 StorageBase 的实例
const storage4 = Storage()
console.log(storage3 === storage4) // true

二、实现一个全局唯一的 Modal 弹框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 静态方法
class Modal {
  static getModal() {
    // 判断是否已经创建过实例
    if (!Modal.modal) {
      // 若这个唯一的实例不存在，那么先创建它
      modal = document.eeElement("div")
      modal.style.display = "none"
      // 其他逻辑
      modal.innerHTML = "我是一个全局唯一的 Modal"
      document.body.appendChild(modal)
      Modal.modal = modal
    }
    // 如果这个唯一的实例已经存在，则直接返回
    return Modal.modal
  }
  // 根据具体业务修改方法
  show() {
    Modal.modal.style.display = "block"
  }
  hide() {
    Modal.modal.style.display = "hide"
  }
}
// 调用
const modal1 = Modal.getModal()

// 闭包
const Modal = (function () {
  let modal = null
  return function () {
    if (!modal) {
      modal = document.eeElement("div")
      modal.style.display = "none"
      modal.innerHTML = "我是一个全局唯一的 Modal"
      document.body.appendChild(modal)
    }
    return modal
  }
})()
// 调用
const modal2 = new Modal()

工厂模式

工厂模式可以细分为 3 类：简单工厂模式、工厂方法模式和抽象工厂模式。其中简单工厂模式不在 GoF 的 23 种设计模式中。在日常开发中，凡是需要生成复杂对象的地方，都可以尝试考虑使用工厂模式来代替。

简单工厂模式

简单工厂模式因为创建实例的方法通常为静态（static）方法，因此又称为静态工厂方法模式。简单工厂模式中一般由工厂类决定创建某一种产品类的实例，产品类通常都具有共同的父类。
通用实现流程：
1、创建抽象产品类，定义产品的公共接口（方法）
2、创建具体产品类，继承抽象产品类并重写、实现具体产品方法
3、创建工厂类，在静态方法中实现根据不同参数来实例化不同具体产品类的逻辑
4、调用工厂类的静态方法，通过传入不同参数创建不同具体产品类的实例

简单工厂模式示例：网站中各级别浏览权限

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 抽象产品类
class AbstractUser {
  constructor(level, viewPage) {
    if(new.target === AbstractUser) {
      throw new Error("抽象类不能实例化!")
    }
    // 可以初始化一些参数
    this.level = level
    this.viewPage = viewPage
  }
  show() {
    throw new Error("子类需重写该方法")
  }
}
// 具体产品类
class User extends AbstractUser{
  constructor(level, viewPage) {
    super(level, viewPage)
    // 其他参数配置
  }
  show() {
    console.log(`${this.level} 您好！拥有权限：${"" + this.viewPage}`)
  }
}
// 工厂类
class Factory {
  static create(level) {
    switch (level) {
      case "admin":
        return new User(level, ["首页", "数据"])
        break;
      case "user":
        return new User(level, ["首页"])
        break;
      // 可能有其他很多级别
      // case "xxxx": new User(level, ["首页", "XXXX"]);break;
      default:
        throw new Error("参数错误，可选参数：admin、user")
    }
  }
}
// 调用
let admin = Factory.create("admin") // 生成实例
let user = Factory.create("user")

从示例中可以看出，如果要添加或修改权限级别，就需要修改工厂类 switch 的逻辑。如果是像示例一样仅几个级别，这样的 switch 还比较好维护。但随着级别增多，case 分支会变多。分支过多会使整个 switch 因为太大而难以维护，因此简单工厂模式只适合产品较少情况，而且修改工厂类违反了开闭原则。

工厂方法模式

工厂方法模式又被称为多态工厂模式。工厂方法模式中，工厂父类负责定义创建产品对象的公共接口，而工厂子类则负责生成具体的产品对象，这样做的目的是将产品类的实例化操作延迟到工厂子类中完成，即通过工厂子类来确定究竟应该实例化哪一个具体产品类。也就是说，先由抽象工厂类实例化一个只生产一类产品的具体工厂，再由该工厂生产一类产品。这里需要理解产品等级结构的概念，所有继承抽象产品类的具体产品类的子类组成一个产品等级结构。比如，上面简单工厂模式示例中的两类用户 admin 和 user 就都归属于用户这同一个产品等级结构。
通用实现流程：
1、创建抽象产品类，定义产品的公共接口
2、创建具体产品类，继承抽象产品类并重写、实现具体产品方法
3、创建抽象工厂类，定义工厂的公共接口
4、创建具体工厂类，继承抽象工厂类并重写、实现实例化具体产品类的方法
5、先调用具体工厂类实例化一个生产需求产品的工厂，再通过该工厂实例生成产品

工厂方法模式示例：网站中各级别浏览权限

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 抽象产品类
class AbstractUser {
  constructor(level, viewPage) {
    if(new.target === AbstractUser) {
      throw new Error("抽象类不能实例化!")
    }
    // 可以初始化一些参数
    this.level = level
    this.viewPage = viewPage
  }
  show() {
    throw new Error("子类需重写该方法")
  }
}
// 具体产品类
class User extends AbstractUser{
  constructor(level, viewPage) {
    super(level, viewPage)
    // 其他参数配置
  }
  show() {
    console.log(`${this.level} 您好！拥有权限：${"" + this.viewPage}`)
  }
}
// 抽象工厂类
class AbstractFactory {
  constructor(level, viewPage) {
    if(new.target === AbstractFactory) {
      throw new Error("抽象类不能实例化!")
    }
    // 可以初始化一些参数
    this.level = level
    this.viewPage = viewPage
  }
  create() {
    throw new Error("子类需重写该方法")
  }
}
// 具体工厂类
class AdminFactory extends AbstractFactory {
  constructor() {
    super("admin", ["首页", "数据"])
    // 其他参数配置
  }
  create() {
    // 其他逻辑
    return new User(this.level, this.viewPage)
  }
}
class UserFactory extends AbstractFactory {
  constructor() {
    super("admin", ["首页"])
    // 其他参数配置
  }
  create() {
    // 其他逻辑
    return new User(this.level, this.viewPage)
  }
}
// 调用
let adminFactory = new AdminFactory() // 创建具体工厂实例对象
let admin = adminFactory.create() // 具体工厂实例生成产品对象

从上面的示例可以看出，如果要增加新的级别，只需要添加新的工厂子类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 新具体工厂类
class SuperAdminFactory extends AbstractFactory {
  constructor() {
    super("admin", ["首页", "数据", "管理"])
    // 其他参数配置
  }
  create() {
    // 其他逻辑
    return new User(this.level, this.viewPage)
  }
}
// 调用
let superAdminFactory = new SuperAdminFactory() // 创建具体工厂实例对象
let superAdmin = superAdminFactory.create() // 具体工厂实例生成产品对象

相比简单工厂模式，工厂方法模式的具体工厂类只会新增，不会修改，这符合开闭原则。

抽象工厂模式

工厂方法模式主要针对的是产品等级结构，每个具体子工厂只会生产同一等级产品。比如说现有大、小两种类型的碗和长、短两种类型的筷子，大小碗属于同一等级结构，长短筷也属于同一等级结构，但碗和筷子这两种产品不属于同一产品等级结构。产品族是指位于不同产品等级结构中，功能相关联的产品组成的家族。一个工厂可以同时生产一个类型的碗和一个类型的筷子，这一个类型的碗和一个类型的筷子就组成一个产品族，比如大碗和长筷就是一个产品族，而抽象工厂模式就是解决产品族的编码问题。抽象工厂模式可以向客户端提供一个接口，使客户端在不必指定产品的具体的情况下，创建多个产品族中的产品对象。
通用实现流程：
1、每种产品要创建一个抽象产品类，定义各种产品的公共接口
2、创建每个产品的具体产品类，继承对应抽象产品类并重写、实现具体产品方法
3、创建抽象工厂类，定义工厂的公共接口
4、创建具体工厂类，继承抽象工厂类并重写、实现实例化具体产品类的方法

抽象工厂模式示例：公司计划在两个地方分别新建一个生产碗和一个生产筷子的工厂，碗有大碗和小碗两种型号，筷子有长筷和短筷两种型号。后面发现两地人对碗筷型号的喜好不同，为了降低成本，需要两个工厂都可以同时生产当地人喜欢型号的碗和筷子（产品族）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// 抽象产品类
// 碗
class AbstractBowl {
  constructor() {
    if (new.target === AbstractBowl) {
      throw new Error("抽象类不能实例化!")
    }
  }
  show() {
    throw new Error("子类需重写该方法")
  }
}
// 筷
class AbstractChopsticks {
  constructor() {
    if (new.target === AbstractChopsticks) {
      throw new Error("抽象类不能实例化!")
    }
  }
  show() {
    throw new Error("子类需重写该方法")
  }
}
// 具体产品类
// 大碗
class BigBowl extends AbstractBowl {
  show() {
    console.log("大碗")
  }
}
// 小碗
class SmallBowl extends AbstractBowl {
  show() {
    console.log("小碗")
  }
}
// 长筷
class LongChopsticks extends AbstractChopsticks {
  show() {
    console.log("长筷")
  }
}
// 短筷
class ShortChopsticks extends AbstractChopsticks {
  show() {
    console.log("短筷")
  }
}
// 抽象工厂类
class AbstractFactory {
  constructor() {
    if (new.target === AbstractFactory) {
      throw new Error("抽象类不能实例化!")
    }
  }
  createBowl() {
    throw new Error("子类需重写该方法")
  }
  createChopsticks() {
    throw new Error("子类需重写该方法")
  }
}
// 具体工厂类
// 工厂 A 可以生产大碗和长筷
class FactoryA extends AbstractFactory {
  createBowl() {
    return new BigBowl()
  }
  createChopsticks() {
    return new LongChopsticks()
  }
}
// 工厂 B 可以生产小碗和短筷
class FactoryB extends AbstractFactory {
  createBowl() {
    return new SmallBowl()
  }
  createChopsticks() {
    return new ShortChopsticks()
  }
}
// 调用
let factoryA = new FactoryA()
let bowlA = factoryA.createBowl()
bowlA.show() // 大碗
let chopsticksA = factoryA.createChopsticks()
chopsticksA.show()  // 长筷

如果碗和筷子进行新类型研发，有了中碗和中筷，使用抽象工厂模式可以很方便的添加：添加 MediumBowl 和 MediumChopsticks 两个具体产品类，新的具体工厂对应方法重写为 new 这两个类即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 小碗
class MediumBowl extends AbstractBowl {
  show() {
    console.log("中碗")
  }
}
// 长筷
class MediumChopsticks extends AbstractChopsticks {
  show() {
    console.log("中筷")
  }
}
// 工厂 C 可以生产中碗和中筷
class FactoryC extends AbstractFactory {
  createBowl() {
    return new MediumBowl()
  }
  createChopsticks() {
    return new MediumChopsticks()
  }
}

总结：
1、当产品仅有一种，且产品型号不多时，使用简单工厂模式
2、当产品仅有一种，但产品型号很多且有可能会扩展时，使用工厂方法模式（针对同一等级结构）
3、当产品种类不止一种，每中产品又有多种型号且有可能会扩展时，使用抽象工厂模式（针对产品族）
4、当抽象工厂模式中每一个具体工厂类只创建一个产品对象，也就是只存在一个产品等级结构时，抽象工厂模式退化成工厂方法模式；当工厂方法模式中抽象工厂与具体工厂合并，提供一个核心工厂来创建产品对象，并将创建对象的工厂方法设计为静态方法时，工厂方法模式退化成简单工厂模式。

建造者模式

建造者模式又称构建者模式或生成器模式。建造者模式指将一个复杂对象的构建与其表示分离，使得同样的构建过程可以创建不同的表示。与工厂模式相比，建造者模式一般用来创建更为复杂的对象，且更关注构建的过程细节。建造者模式专门提供一个指挥者来管理具体建造者生成产品，它把产品的构造过程放到指挥者的方法中，把装配具体单个方法放到具体建造者中。用户不需要知道产品内部组成的细节，只需要通过指挥者使用不同的具体建造者即可得到不同的产品对象。而建造者将创建过程分解在不同的方法中，使得每个过程更加清晰，同时也能更加精确的控制产品的创建过程。
通用实现流程：
1、创建产品类，定义产品具体方法
2、创建抽象建造者类，定义建造者的公共接口，通常还包含一个返回复杂产品的方法
3、创建具体建造者类，继承抽象建造者类并重写、实现具体方法
4、创建指挥者类，明确生产产品流程

示例

组装电脑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// 产品类
class Computer {
  constructor() {
    this.parts = []
  }
  add(part) {
    this.parts.push(part)
  }
  show() {
    this.parts.map(item => {
      console.log(item + " 已安装")
    })
    console.log("电脑组装完成")
  }
}
// 抽象建造者类
class Builder {
  constructor() {
    if (new.target === Builder) {
      throw new Error("抽象类不能实例化!")
    }
    this.computer = new Computer()
  }
  // 装主板
  addMotherboard() {
    throw new Error("子类需重写该方法")
  }
  // 装 CPU
  addCPU() {
    throw new Error("子类需重写该方法")
  }
  // 装硬盘
  addHD() {
    throw new Error("子类需重写该方法")
  }
  // 获得组装好的电脑
  getComputer() {
    return this.computer
  }
}
// 具体建造者类，如果需要装其他品牌的配件，就需要新的具体建造者类
class ConcreteBuilder1 extends Builder {
  // 将整个过程分解为多个阶段
  addMotherboard() {
    this.computer.add("微星主板")
  }
  addCPU() {
    this.computer.add("AMD CPU")
  }
  addHD() {
    this.computer.add("希捷硬盘")
  }
}
class ConcreteBuilder2 extends Builder {
  // 将整个过程分解为多个阶段
  addMotherboard() {
    this.computer.add("技嘉主板")
  }
  addCPU() {
    this.computer.add("Intel CPU")
  }
  addHD() {
    this.computer.add("三星硬盘")
  }
}
// 指挥者类
class Director {
  constructor(builder) {
    this.builder = builder
  }
  // 组装电脑具体流程
  assemble() {
    this.builder.addMotherboard()
    this.builder.addCPU()
    this.builder.addHD()
  }
}
// 调用
let concreteBuilder1 = new ConcreteBuilder1()
let director1 = new Director(concreteBuilder1)
director1.assemble()
let computer1 = concreteBuilder1.getComputer()
computer1.show()
// 微星主板 已安装
// AMD CPU 已安装
// 希捷硬盘 已安装
// 电脑组装完成
let concreteBuilder2 = new ConcreteBuilder2()
let director2 = new Director(concreteBuilder2)
director2.assemble()
let computer2 = concreteBuilder2.getComputer()
computer2.show()
// 技嘉主板 已安装
// Intel CPU 已安装
// 三星硬盘 已安装
// 电脑组装完成

原型模式

基于原型（已有对象）来创建对象的方式就叫作原型设计模式，简称原型模式。原型模式不仅是一种设计模式，它还是一种编程范式（programming paradigm），是 JavaScript 面向对象系统实现的根基。其它像 Java 等强类型语言的类型之间进行解耦要用到原型模式，但 JavaScript 中没有真正的类，Class 其实是基于原型继承的语法糖，根本就不存在类型耦合的问题。查看原型及原型链和继承。更符合 JavaScript 语言的表述是：如何实现深拷贝。查看深浅复制

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

持续学习