设计模式

设计模式总共有 23 种，但在前端领域其实没必要全部都去学习，毕竟大部分的设计模式是在 JavaScript 中占的比重并不是那么大，本文会列举出一些 JavaScript 常见的、容易被忽视的设计模式，不过还是有必要先简单了解一下设计模式相关的概念.

设计模式是什么？

先举个形象的例子，比如现在正在考试而且恰好在考数学，实际上每道数学题目都对应着一种或多种解决公式（如和三角形相关的勾股定理），而这些解决公式是经过数学家研究、推导、总结好的，我们只需要把题目和 已有公式 对应上就很容易解决问题，而 设计模式 也是如此，只不过是它是相对于 软件设计领域 而言的.

设计模式（Design pattern） 是一套被反复使用、经过分类、代码设计经验的总结，简单来说设计模式就是为了解决 软件设计领域 不同场景下相应问题的 解决方案.

设计原则（SOLID）

SOLID 实际上指的是五个基本原则，但在前端领域涉及到最多的是仍然是前面两条：

单一功能原则（Single Responsibility Principle）
开放封闭原则（Opened Closed Principle）
里式替换原则（Liskov Substitution Principle）
接口隔离原则（Interface Segregation Principle）
依赖反转原则（Dependency Inversion Principle）

设计模式的类型

主要分为三个类型：

创建型

主要用于解耦 对象的实例化 过程，即用于创建对象，如对象实例化
本文主要包含：简单工厂模式、抽象工厂模式、单例模式、原型模式

行为型

主要用于优化不同类、对象、接口间的结构关系，如把类或对象结合在一起形成一个更大的结构
本文主要包含：装饰器模式、适配器模式、代理模式

结构型

主要用于定义类和对象如何交互、划分责任、设计算法
本文主要包含：策略模式、状态模式、观察者模式、发布订阅模式、迭代器模式

创建型设计模式

设计模式的核心是区分逻辑中的 可变部分 和 不变部分，并使它们进行分离，从而达到使变化的部分易扩展、不变的部分稳定.

工厂模式

简单工厂模式

核心就是创建一个对象，这里的 可变部分 是参数，不变部分 是 共有属性.

举例：通过不同职级的员工创建员工相关信息，需要包含 name、age、position、job 等信息.

实现方式一：

核心就是 可变部分 默认 参数化

function Staff(name, age, position, job) {
    this.name = name;
    this.age = age;
    this.position = position;
    this.job = job;
}
const developer = new Staff('zs', 18, 'develoment', ['写 bug', '改 bug', '摸鱼']);
const productManager = new Staff('ls', 30, 'manager', ['提需求', '改需求', '面向 PPT 开发']);
复制代码

实现方式二：

实际上在实现方式一中的 job 部分是和 position 是相互关联的，可以认为 job 部分是 不变的，因此可以根据 position 内容的内容来自动匹配 job

function Staff(name, age, position, job) {
    this.name = name;
    this.age = age;
    this.position = position;
    this.job = job;
}
function StaffFactory(name, age, position){
    let job = []
    switch (position) {
        case 'develoment':
            job = ['写 bug', '改 bug', '摸鱼'];
            break;
        case 'manager':
            job = ['提需求', '改需求', '面向 PPT 开发'];
            break;
        ...
    }
    return new Staff(name, age, position, job);
}
const developer = StaffFactory('zs', 18, 'developer');
const productManager = StaffFactory('ls', 30, 'manager');
复制代码

抽象工厂模式

这个模式最显眼的就是抽象两个字了，在如 Java 语言当中存在所谓的 抽象类，这个抽象类里面的所有属性和方法都没有具体实现，只有单纯的定义，而继承这个抽象类的子类必须要实现其对应的抽象属性和抽象方法.

在 JavaScript 中没有这样的直接定义，不过根据上面的描述其实我们可以把它映射到 typescript 中的 interface 接口，理解到这其实让我联想到了 vue.js 中的 自定义渲染器，预留的自定义渲染器的各个方法目的就是实现跨平台的渲染方式

// 文件位置：packages\runtime-core\src\renderer.ts
export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}
// 文件位置：packages\runtime-core\src\renderer.ts
// RendererOptions 就是一个 Interface 接口
export interface RendererOptions<
  HostNode = RendererNode,
  HostElement = RendererElement
> {
  patchProp(
    el: HostElement,
    key: string,
    prevValue: any,
    nextValue: any,
    isSVG?: boolean,
    prevChildren?: VNode<HostNode, HostElement>[],
    parentComponent?: ComponentInternalInstance | null,
    parentSuspense?: SuspenseBoundary | null,
    unmountChildren?: UnmountChildrenFn
  ): void
  insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
  remove(el: HostNode): void
  createElement(
    type: string,
    isSVG?: boolean,
    isCustomizedBuiltIn?: string,
    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
  ): HostElement
  createText(text: string): HostNode
  createComment(text: string): HostNode
  setText(node: HostNode, text: string): void
  setElementText(node: HostElement, text: string): void
  parentNode(node: HostNode): HostElement | null
  nextSibling(node: HostNode): HostNode | null
  querySelector?(selector: string): HostElement | null
  setScopeId?(el: HostElement, id: string): void
  cloneNode?(node: HostNode): HostNode
  insertStaticContent?(
    content: string,
    parent: HostElement,
    anchor: HostNode | null,
    isSVG: boolean,
    start?: HostNode | null,
    end?: HostNode | null
  ): [HostNode, HostNode]
}
复制代码

接下来我们将以上的 typescript 的形式转变成 JavaScript 形式的抽象模式：

// 抽象 Render 类
class Renderer {
  patchProp(
    el,
    key,
    prevValue,
    nextValue,
    isSVG,
    prevChildren,
    parentComponent,
    parentSuspense,
    unmountChildren
  ) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  insert(el, parent, anchor) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  remove(el) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  createElement(type, isSVG, isCustomizedBuiltIn, vnodeProps) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  createText(text) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  createComment(text) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  setText(node, text) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  setElementText(node, text) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  parentNode(node) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  nextSibling(node) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  querySelector(selector) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  setScopeId(el, id) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  cloneNode(node) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
  insertStaticContent(content, parent, anchor, isSVG, start, end) {
    throw Error('抽象工厂方法不能直接使用，你需要将我重写！！！');
  }
}
// 具体渲染函数的实现
class createRenderer extends Renderer{
    // 待实现的渲染器方法
    ...
}
复制代码

单例模式

核心就是通过多次 new 操作进行实例化时，能够保证创建 实例对象 的 唯一性.

vuex 中的单例模式

其实，vuex 中就使用到了 单例模式，代码本身比较简单，当 install 方法被多次调用时，就会得到一个错误信息，并不会多次向 Vue 中混入 vuex 中自定义的内容：

实现一个单例模式

这里举个封装 localStorage 方法的例子，并提供给外部对应的创建方法，如下：

let storageInstance = null;
class Storage {
    getItem(key) {
        let value = localStorage.getItem(key);
        try {
            return JSON.parse(value);
        } catch (error) {
            return value;
        }
    }
    setItem(key, value) {
        try {
            localStorage.setItem(JSON.stringify(value));
        } catch (error) {
            // do something
            console.error(error);
        }
    }
}
// 单例模式
export default function createStorage(){
    if(!storageInstance){
        storageInstance = new Storage();
    }
    return storageInstance;
}
复制代码

原型模式

在 JavaScript 中原型模式是很常见的，JavaScript 中实现的继承或者叫委托也许更合适，因为它不等同于如 Java 等语言中的继承，毕竟 JavaScript 的继承是基于原型（prototype）来实现.

class Person {
    say() {
        console.log(`hello, my name is ${this.name}!`);
    }
    eat(foodName) {
        console.log(`eating ${foodName}`);
    }
}
class Student extends Person {
    constructor(name) {
        super();
        this.name = name;
    }
}
const zs = new Student('zs');
const ls = new Student('ls');
console.log(zs.say === ls.say);// Java 中是不相等的， JavaScript 中是相等的
console.log(zs.eat === ls.eat);// Java 中是不相等的， JavaScript 中是相等的

vue2 中的原型模式

文件位置：\src\core\instance\lifecycle.js

常见 JavaScript 设计模式 — 原来这么简单（一）