设计模式（Design Pattern）是对软件设计中普遍存在（反复出现）的各种问题所提出的解决方案。设计模式并不直接用来完成代码的编写，而是描述在各种不同情况下，要怎么解决问题的一种方案。 --- 维基百科

对于这类抽象的的理论属于编码之"道"；咱通过实践结合来加深理解

设计模式原则

S – Single Responsibility Principle 单一职责原则

**O – OpenClosed Principle 开放/封闭原则 **开闭原则

L – Liskov Substitution Principle 里氏替换原则

D – Dependency Inversion Principle 依赖倒置原则

L – Law of Demeter 迪米特原则

了解了设计模式原则之后，下面再来看看具体的设计模式。

设计模式的分类

经典的设计模式有 3 大类，共 23 种，包括创建型、结构型和行为型。

创建型

创建型模式的主要关注点是“如何创建和使用对象”，这些模式的核心特点就是将对象的创建与使用进行分离，从而降低系统的耦合度。使用者不需要关注对象的创建细节，对象的创建由相关的类来完成。

具体包括下面几种模式：

• 抽象工厂模，提供一个超级工厂类来创建其他工厂类，然后通过工厂类创建类实例；
• 生成器模式，将一个复杂对象分解成多个相对简单的部分，然后根据不同需要分别创建它们，最后构建成该复杂对象；
• 工厂方法模式，定义一个用于创建生成类的工厂类，由调用者提供的参数决定生成什么类实例；
• 原型模式，将一个对象作为原型，通过对其进行克隆创建新的实例；
• 单例模式，生成一个全局唯一的实例，同时提供访问这个实例的函数。

工厂模式

class Product {
    constructor(name) {
        this.name = name
    }
    init() {
        console.log('init')
    }
    fun() {
        console.log('fun')
    }
}

class Factory {
    create(name) {
        return new Product(name)
    }
}

// use
let factory = new Factory()
let p = factory.create('p1')
p.init()
p.fun()

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

下面的代码示例是 Vue.js 源码中使用单例模式的例子。其中，构造了一个唯一的数组 _installedPlugins 来保存插件，并同时提供了 Vue.use() 函数来新增插件。

// src/core/global-api/use.js
export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    ......
  }
}

下面的代码中，cloneVNode() 函数通过已有 vnode 实例来克隆新的实例，用到了原型模式。

// src/core/vdom/vnode.js
export function cloneVNode (vnode: VNode): VNode {
  const cloned = new VNode(
    vnode.tag,
    vnode.data,
    // #7975
    // clone children array to avoid mutating original in case of cloning
    
    // a child.
    vnode.children && vnode.children.slice(),
    vnode.text,
    vnode.elm,
    vnode.context,
    vnode.componentOptions,
    vnode.asyncFactory
  )
  cloned.ns = vnode.ns
  cloned.isStatic = vnode.isStatic
  cloned.key = vnode.key
  cloned.isComment = vnode.isComment
  cloned.fnContext = vnode.fnContext
  cloned.fnOptions = vnode.fnOptions
  cloned.fnScopeId = vnode.fnScopeId
  cloned.asyncMeta = vnode.asyncMeta
  cloned.isCloned = true
  return cloned
  
  
}

结构型

结构型模式描述如何将类或对象组合在一起形成更大的结构。它分为类结构型模式和对象结构型模式，类结构型模式采用继承机制来组织接口和类，对象结构型模式釆用组合或聚合来生成新的对象。

具体包括下面几种模式：

• 适配器模式，将一个类的接口转换成另一个类的接口，使得原本由于接口不兼容而不能一起工作的类能一起工作；
• 桥接模式，将抽象与实现分离，使它们可以独立变化，它是用组合关系代替继承关系来实现的，从而降低了抽象和实现这两个可变维度的耦合度；
• 组合模式，将对象组合成树状层次结构，使用户对单个对象和组合对象具有一致的访问性；
• 装饰器模式，动态地给对象增加一些职责，即增加其额外的功能；
• 外观模式，为多个复杂的子系统提供一个统一的对外接口，使这些子系统更加容易被访问；
• 享元模式，运用共享技术来有效地支持大量细粒度对象的复用；
• 代理模式，为某对象提供一种代理以控制对该对象的访问，即客户端通过代理间接地访问该对象，从而限制、增强或修改该对象的一些特性。

Vue.js 在判断浏览器支持 Proxy 的情况下会使用代理模式，下面是具体源码：

// src/core/instance/proxy.js
initProxy = function initProxy (vm) {
  if (hasProxy) {
    // determine which proxy handler to use
    const options = vm.$options
    const handlers = options.render && options.render._withStripped
      ? getHandler
      : hasHandler
    vm._renderProxy = new Proxy(vm, handlers)
  } else {
    vm._renderProxy = vm
  }
}

Vue 的 Dep 类则应用了代理模式，调用 notify() 函数来通知 subs 数组中的 Watcher 实例。

// src/core/observer/dep.js export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { Dep.target.addDep(this) } }

 notify () {   // stabilize the subscriber list first   const subs = this.subs.slice()   if (process.env.NODE_ENV !== 'production' && !config.async) {    // subs aren't sorted in scheduler if not running async    // we need to sort them now to make sure they fire in correct    // order    subs.sort((a, b) => a.id - b.id)   }   for (let i = 0, l = subs.length; i < l; i++) {    subs[i].update()   }  } }

行为型

行为型模式用于描述程序在运行时复杂的流程控制，即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务，它涉及算法与对象间职责的分配。

行为型模式分为类行为模式和对象行为模式，类的行为模式采用继承机制在子类和父类之间分配行为，对象行为模式采用多态等方式来分配子类和父类的职责。

具体包括下面几种模式：

• 责任链模式，把请求从链中的一个对象传到下一个对象，直到请求被响应为止，通过这种方式去除对象之间的耦合；
• 命令模式，将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开；
• 策略模式，定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的改变不会影响使用算法的用户；
• 解释器模式，提供如何定义语言的文法，以及对语言句子的解释方法，即解释器；
• 迭代器模式，提供一种方法来顺序访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示；
• 中介者模式，定义一个中介对象来简化原有对象之间的交互关系，降低系统中对象间的耦合度，使原有对象之间不必相互了解；
• 备忘录模式，在不破坏封装性的前提下，获取并保存一个对象的内部状态，以便以后恢复它；
• 观察者模式，多个对象间存在一对多关系，当一个对象发生改变时，把这种改变通知给其他多个对象，从而影响其他对象的行为；
• 状态模式，类的行为基于状态对象而改变；
• 访问者模式，在不改变集合元素的前提下，为一个集合中的每个元素提供多种访问方式，即每个元素有多个访问者对象访问；
• 模板方法模式，定义一个操作中的算法骨架，将算法的一些步骤延迟到子类中，使得子类在可以不改变该算法结构的情况下重定义该算法的某些特定步骤。

下面是 Vue.js 中使用状态对象 renderContext 的部分源码：

// src/core/instance/render.js
export function initRender (vm: Component) {
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  ......
}

Vue.js 中通过 Object.defineProperty 劫持再发送消息则属于观察者模式。

// src/core/observer/index.js
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
    ......
  },
  set: function reactiveSetter (newVal) {
    const value = getter ? getter.call(obj) : val
    /* eslint-disable no-self-compare */
    if (newVal === value || (newVal !== newVal && value !== value)) {
      return
    }
    /* eslint-enable no-self-compare */
    if (process.env.NODE_ENV !== 'production' && customSetter) {
      customSetter()
    }
    // #7981: for accessor properties without setter
    if (getter && !setter) return
    if (setter) {
      setter.call(obj, newVal)
    } else {
      val = newVal
    }
    childOb = !shallow && observe(newVal)
    dep.notify()
  }
})

总结

虽然 JavaScript 并不是一门面向对象的语言，但设计模式的原则和思想对我们编写代码仍有很重要的指导意义。

本课时介绍了设计模式的 6 个重要原则，包括开闭原则、里氏替换原则、依赖倒置原则、接口隔离原则、迪米特原则、单一职责原则，重点讨论了接口和类的使用方式；然后介绍了 3 类设计模式以及对应的例子，创建型模式重点关注如何创建类实例，结构型模式重点关注类之间如何组合，行为型模式关注多个类之间的函数调用关系。

要全部记住 23 种设计模式有些困难，重点在于理解其背后的思想与目的，从而做到心中有数，在此之上配合编码实践，才能最终完全掌握。

最后布置一道思考题：你还在框架代码中找到过哪些设计模式的应用？