一、二十三种设计模式

创建型：工厂方法模式（Factory Method）、抽象工厂模式（Abstract Factory）、建造者模式（Builder）、原型模式（prototype）、单例模式（Singleton）；

结构型：适配器模式（Adapter）、桥接模式（Bridge）、组合模式（Composite）、装饰模式（Decorator）、外观模式（Facade）、享元模式（Flyweight）、代理模式（Proxy）；

行为型：职责链模式（Chain of Responsibility）、命令模式（Command）、解释器模式（Interpreter）、迭代器模式（Iterator）、中介者模式（Mediator）、备忘录模式（Memento）、观察者模式（Observer）、状态模式（State）、策略模式（Strategy）、模板方法模式（Template Method）、访问者模式（Visitor）

创建型：如何创建一个对象;

结构型：如何灵活的将对象组装成较大的结构;

行为型:负责对象间的高效通信和职责划分

二、浏览器中的设计模式

单例模式：单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例，这个类称为单例类，他提供全局访问的方法。

在前端中，用于定义全局唯一访问对象；用于缓存、全局状态管理等。

观察者模式（又叫做发布-订阅模式，模型-视图模式，源-监听器模式或从属者模式）：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。

在前端中一般用于系统架构之间的解耦，业务中一些实现模式，例如邮件订阅，上线订阅等等。

三、JavaScript中的设计模式

原型模式：原型模式是一种对象创建模式，用原型实例指定创建对象的种类，并且通过复制这些原型创建新的对象。

在JavaScript中,这是对象创建的基本模式。

代理模式：给某一个对象提供一个代理，并且由代理对象控制对原对象的引用，可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。

在JavaScript中,可用于监控，代理工具，前端框架实现、系统优化等等。

迭代器模式：提供一种方法来访问聚合对象，而不用暴露这个对象的内部表示，其别名为游标（Cursor）。

在JavaScript中，为数据结构中多种数据类型，列表，树等，提供通用操作接口。

四、前端框架中的设计模式

代理模式（不再赘述）

一般用于框架中的虚拟代理、保护代理、动态代理等。

组合模式：组合多个对象形成树形结构以表示“部分-整体”的结构层次，可多个对象组合使用，也可以单个对象独立使用。组合模式用于描述整体与部分的关系，也被称为“部分-整体”模式。

在前端框架中，广泛应用于DOM，前端组件，文件目录，部门管理等。