本文将对 20 多种 JavaScript 设计模式进行简单概述，然后结合 ES6 类的方式来编写实例代码展示其使用方式。
JavaScript 在现代前端中扮演重要的角色，相比过去能够做的事情已经不在一个级别上了。JavaScript 最大的特征是其灵活性，一般只要敢想敢写，可以把程序写得很简单，有可以写得很复杂。其灵活性导致编写 JavaScript 的时候能够不断的优化，能够不断质疑写的质量。而设计模式，是不分编程语言的，是软件工程的内容，JavaScript 强大的表现力赋予了开发者运用设计模式编写代码时创造性。
什么是设计模式？
设计模式是软件设计中常见问题的解决方案，这些模式很容易重复使用并且富有表现力。
在软件工程中，设计模式（design pattern）是对软件设计中普遍存在（反复出现）的各种问题，所提出的解决方案。它并不直接用来完成代码的编写，而是描述在各种不同情况下，要怎么解决问题的一种方案。面向对象设计模式通常以类别或对象来描述其中的关系和相互作用，但不涉及用来完成应用程序的特定类别或对象。—— 维基百科
在 JavaScript 中使用设计模式主要有以下原因：
- 可维护性：设计模式有助于降低模块间的耦合程度。
- 沟通：设计模式为处理不同类型的对象提供了一套通用的术语。
- 性能：对代码起到优化作用，提高程序的运行速度。当然不是所有的设计模式都能够改善性能。
有三种模式：创建型模式，结构型模式、行为型模式。
- 创建型模式：解决与创建对象相关的问题。
- 结构型模式：处理实体之间的关系，以及它们如何共同组成一个更大的结构。
- 行为型模式：处理对象如何相互通信和交互。
创建型设计模式
创建设计模式将创建对象，而不是直接实例化对象。
在软件工程中，创建型模式是处理对象创建的设计模式，试图根据实际情况使用合适的方式创建对象，因为基本的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式的关注点是如何创建对象，其核心思想是要把对象的创建和使用相分离。—— 维基百科
- 工厂模式
- 抽象工厂
- 构建器模式
- 原型模式
- 单例模式
1. 工厂模式
工厂模式定义了一个用于创建单个对象的接口，并让子类决定要实例化类。
工厂方法模式（英语：Factory method pattern）是一种实现了“工厂”概念的面向对象设计模式。就像其他创建型模式一样，它也是处理在不指定对象具体类型的情况下创建对象的问题。工厂方法模式的实质是“定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。—— 维基百科
实例
以一个点为例，有一个 Point 类，必须创建一个笛卡尔点和一个极点。将定义一个 Point 工厂来完成这项工作。
CoordinateSystem = {
CARTESIAN:0,
POLAR:1
};
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static get factory() {
return new PointFactory();
}
}现在将创建 Point 工厂，现在将使用工厂：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static get factory() {
return new PointFactory();
}
}
class PointFactory {
static newCartesianPoint(x, y) {
return new Point(x, y);
}
static newPolarPoint(rho, theta) {
return new Point(rho * Math.cos(theta), rho * Math.sin(theta));
}
}
const point = PointFactory.newPolarPoint(5, Math.PI / 2);
const point2 = PointFactory.newCartesianPoint(5, 6);
console.log(point);
console.log(point2);2. 抽象工厂
抽象工厂创建公共对象的族或组，而不指定它们的具体类。
抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。—— 维基百科
实例
将使用饮料和饮料制造机的示例。
class Drink {
consume() {}
}
class Tea extends Drink {
consume() {
console.log("This is tea");
}
}
class Coffee extends Drink {
consume() {
console.log("This is coffee");
}
}
class DrinkFactory {
prepare(amount) {}
}
class TeaFactory extends DrinkFactory {
makeTea() {
console.log("Tea Created");
return new Tea();
}
}
class CoffeeFactory extends DrinkFactory {
makeCoffee() {
console.log("Coffee Created");
return new Coffee();
}
}
const teaDrinkFactory = new TeaFactory();
const tea = teaDrinkFactory.makeTea();
tea.consume();
const coffeeDrinkFactory = new CoffeeFactory();
const coffee = coffeeDrinkFactory.makeCoffee();
coffee.consume();3. 构建器模式
构建器模式从简单对象构造复杂对象。
又名：建造模式，是一种对象构建模式。它可以将复杂对象的建造过程抽象出来（抽象类别），使这个抽象过程的不同实现方法可以构造出不同表现（属性）的对象。—— 维基百科
实例
将使用存储 Person 信息的 person 类的 ab 示例。
class Person {
constructor() {
this.streetAddress = this.postcode = this.city = "";
this.companyName = this.position = "";
this.annualIncome = 0;
}
toString() {
return `个人生活在 ${this.streetAddress}，${this.city}，${this.postcode} ，工作在 ${this.companyName} 作为一名 ${this.position} 收入 ${this.annualIncome}`;
}
}现在将创建 Person Builder、Person Job Builder 和 Person Address Builder。
class PersonBuilder {
constructor(person = new Person()) {
this.person = person;
}
get lives() {
return new PersonAddressBuilder(this.person);
}
get works() {
return new PersonJobBuilder(this.person);
}
build() {
return this.person;
}
}
class PersonJobBuilder extends PersonBuilder {
constructor(person) {
super(person);
}
at(companyName) {
this.person.companyName = companyName;
return this;
}
asA(position) {
this.person.position = position;
return this;
}
earning(annualIncome) {
this.person.annualIncome = annualIncome;
return this;
}
}
class PersonAddressBuilder extends PersonBuilder {
constructor(person) {
super(person);
}
at(streetAddress) {
this.person.streetAddress = streetAddress;
return this;
}
withPostcode(postcode) {
this.person.postcode = postcode;
return this;
}
in(city) {
this.person.city = city;
return this;
}
}现在将使用上面定义的构建器：
const personBuilder = new PersonBuilder();
const person = personBuilder.lives
.at("高新南九道")
.in("深圳")
.withPostcode("518029")
.works.at("字节跳动")
.asA("工程师")
.earning(10000)
.build();
console.log(person.toString()); // 个人生活在 高新南九道，深圳，518029 ，工作在 字节跳动 作为一名 工程师 收入 100004. 原型模式
原型模式从现有对象创建新对象。
其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是我们所称的“原型”，这个原型是可定制的。—— 维基百科
实例
使用汽车的例子。
class Car {
constructor(name, model) {
this.name = name;
this.model = model;
}
setName(name) {
console.log(name);
this.name = name;
}
clone() {
return new Car(this.name, this.model);
}
}
const car = new Car();
car.setName("闪电");
const car2 = car.clone();
car2.setName("麦昆");5. 单例模式
单例模式确保只为特定类创建一个对象。
在软件工程中，单例模式是一种软件设计模式，它将类的实例化限制为一个“单一”实例。当需要一个对象来协调整个系统的动作时，这很有用。 —— 维基百科
实例
创建一个单例类。
class Singleton {
constructor() {
const instance = this.constructor.instance;
if (instance) {
return instance;
}
this.constructor.instance = this;
}
say() {
console.log("Saying……");
}
}
const s1 = new Singleton();
const s2 = new Singleton();
console.log("Are they same?" + (s1 === s2));
s1.say();
