# 前言

设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

作者认为设计模式不应该脱离场景问题存在，设计模式应该是解决特定场景下的特定问题，提高代码的可复用性和可靠性。

本章会给大家介绍四种前端常用的设计模式，了解它们的适用场景以及解决的问题。四种常用设计模式：单例模式，工厂模式，代理（委托）模式，发布-订阅模式。其中在前端应用最广泛以及最重要的模式是发布-订阅模式模式（没有之一）。

# 设计模式源码

源码地址：github.com/dkypooh/fro…

# 工厂模式

工厂模式（Factory Pattern）是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

# 定义

定义一个创建对象的接口，让其子类自己决定实例化哪一个工厂类，工厂模式使其创建过程延迟到子类进行。

# 实现方法

让其子类实现工厂接口，返回的也是一个抽象的产品。

# 适用场景

子类不需要定义父类的实现，只需要实现父类定义接口。

1. 您需要一辆汽车，可以直接从工厂里面提货，而不用去管这辆汽车是怎么做出来的，以及这个汽车里面的具体实现。
2. Hibernate 换数据库只需换方言和驱动就可以。

# 代码实例

// 1. 父类实现基本定义，定义姓名
class Parent {
    getName() {

    }
}

// 2. 子类集成了父类的各个基因，男孩名字叫 bob
class ChildBoy extends Parent {
    getName() {
        return 'bob';
    }
}

// 3. 子类集成了父类的各个基因，女孩名字叫 alice
class ChildGirl extends Parent {
    getName() {
        return 'alice';
    }
}

# 单例模式

# 定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

# 实现方法

判断系统是否已经有这个单例，如果有则返回，如果没有则创建，确保了一个类只有一个实例对象。

# 适用场景

当您想控制实例数目，节省系统资源的时候，有如下场景可以适用：

1. 全局性实例化组件，例如：Toast组件，Modal弹窗组件
2. 避免类防止多次创建实例的场景，例如：实例化事件模块new EventEmitter()

# 代码实例

//  1. 创建 Toast 单例类
class Singleton {
  constructor(options) {
    this.options = options
  }
  show(message) {
    alert(message)
  }
}

// 2. 创建代理类，确保构造器只有一个实例
function ProxyClass() {
  let instance = null
  return function(options) {
    if (!instance) {
      instance = new Singleton(options);
    }

    return instance;
  }
}

// 3. 执行代理函数，闭包保存实例，返回单例类
const SingletonClass =  ProxyClass();

// 4. 测试代码，实例化两个类，实例是否相同
const d = new SingletonClass('dd');
const c = new SingletonClass('cc');
d === c

# 事件代理模式

事件代理模式在前端的主要应用场景是事件委托（event delegate）。

# 定义

JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

# 实现方法

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在