前端设计模式应应用场景

创建型模式(Creational Patterns)

处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。
顾名思义，这些模式都是用来创建实例对象的。

工厂模式

工厂模式就是根据不用的输入返回不同的实例

在Vue在路由创建模式中，也多次用到了工厂模式

export default class VueRouter {
    constructor(options) {
        this.mode = mode    // 路由模式
        switch (mode) {   // 简单工厂
            case 'history':  
                this.history = new HTML5History(this, options.base)
                break
            case 'hash':      
                this.history = new HashHistory(this, options.base, this.fallback)
                break
            case 'abstract':   
                this.history = new AbstractHistory(this, options.base)
                break
            default:
        }
    }
}

单例模式

保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。

Vuex

原型模式

用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里

行为型模式(Behavioral Patterns)

用于识别对象之间常见的交互模式并加以实现，增加了这些交互的灵活性。

策略模式

其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换

策略模式经常用在表单验证的场景。Element UI 的 Form 表单 具有表单验证功能，用来校验用户输入的表单内容

观察者模式/发布订阅模式

• 观察者模式（Observer Pattern）定义了一种一对多的关系，让多个订阅者对象同时监听某一个发布者，或者叫主题对象，这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象，使得它们能够自动更新自己。

• 发布订阅模式别名，非常形象地诠释了观察者模式里两个核心的角色要素——发布者和订阅者。
  发布-订阅模式有一个调度中心

EventBus

迭代器模式

提供一种方法 , 顺序访问 集合对象 中的 各个元素 , 而 不暴露 该对象 的内部表示 ;

状态模式

对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。

结构型模式(Structural Patterns)

结构型从功能上来说就是给元素添加行为的，目标是优化结构的实现方式
通过识别系统中组件间的简单关系来简化系统的设计。

装饰器模式

为对象添加新功能，不改变其原有的结构和功能。

代理模式

使用者无权访问目标对象，中间加代理，通过代理做授权和控制。

ES6 Proxy