前端常用7中设计模式总结，包含案例及实现（入门必看）

前言

在学完前端基础的 HTML CSS JavaScript 以及框架 Vue React 之后，想更进一步时，学习了设计模式，以求得在工作中能能更好的方式实现需求，以及在后续学习开源库的源码时能够通过设计模式的思虑，了解开源工具的实现思路。介于本人学习上时间短，内容会有疏漏，如果错误，欢迎网友鞭策,会及时改进！

本文目标

本文主要介绍前端常用的7中设计模式，包含设计原则，内容较浅，主要是用来熟悉设计模式的概念，以及帮助你了解过往开发中有遇到哪些设计模式。对于每种设计模式都包含有具体的案例场景，以及简易的实现。篇幅较长，内容浅显，不作为深入学习设计模式使用，主要针对对设计模式不太熟悉的初级前端阅读。好了，下面开始吧！

设计原则

设计原则：

• S（Single Responsibility Principle） 单一职责原则
• 0（Open Closed Principle）开放封闭原则
• L（Liskov Substitution Principle）里氏置换原则
• I（Interface Segregation Principle）接口独立原则
• D（Dependence Inversion Principle）依赖导致原则
• l（Law of Demeter） 迪米特法则

单一职责原则：一个程序只做好一件事

开放封闭原则：对修改封闭，对拓展开放。

里氏置换原则：子类能覆盖父类，父类能出现的地方子类就能出现

接口独立原则：保持接口的单一独立

依赖倒置原则：面向接口编程，依赖于抽象而不依赖于具体

迪米特法则： 一个对象应该对其他对象有最少的了解

前端常用的是前两条原则：单一职责原则和开放封闭原则，

用Promise加载图片的例子来演示：

const promise = new Promise( (resolve, reject)=> {
  // ... some code





  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
  
promise.then((res) => {
  console.log(res)
  return res;
}).then((res) => {
   // ... some code
}).catch((err) => {
  console.log(err)
})

上面的代码中满足：

单一职责原则：在每个新增加的then中写入一些代码，处理一个逻辑。如果需要处理多个逻辑，就增加多个then

开放封闭原则：如果这个需求变更了，就新增then添加处理逻辑即可，原有的处理逻辑代码不用修改。即对拓展开放，对修改封闭。

下面出现的设计模式也都着重分析这两条原则。

23 种设计模式

《设计模式：可复用面向对象软件的基础》这本书里面总结了常用的 23 种设计模式，这里只着重讲标注的7种

• 工厂模式
• 单例模式
• 原型模式
• 装饰器模式
• 代理模式
• 观察者模式
• 迭代器模式

工厂模式

创建对象的一种方式。不用每次都亲自创建对象，而是通过一个既定的“工厂”来生产对象。

工厂模式最大的优点在于实现对象的创建和对象的使用分离

interface IProduct {
    name: string
    fn1: () => void 
}


class Product1 implements IProduct { 
    name: string
    constructor(name: string) {
        this.name = name
    }

    fn1() { 
        alert('product1 fn1')
    } 
}



class Product2 implements IProduct { 
    name: string
    constructor(name: string) {
        this.name = name
    }
    fn1() { 
        alert('product2 fn1')
    } 
}

class Creator { 
    create(type: string, name: string): IProduct {
        if (type === 'p1') {
            return new Product1(name)
        }
        if (type === 'p2') {
            return new Product2(name)
        }
        throw new Error('Invalid type')
    }
}

通过一个工厂类Creator可以创建多种不同的类。工厂和生成的类分离，可以拓展出多个类，工厂的创建逻辑也可以自由的拓展。符合开放封闭原则，对拓展开放，对修改封闭。

在前端中

• jQuery $
• Vue _createElementVNode
• React createElement

都使用到了工厂模式。

单例模式

即对一个 class 只能创建一个实例，即便调用多次。

做法：通过设置限制，使只能初始化实例一次

使用 TS 的 static``private特性

class Singleton {
  //private 外部无法初始化
  private constructor() { }
  // static 属性
  private static instance: Singleton | null;


  // static 方法
  static getInstance(): Singleton {
    if (Singleton.instance == null) {
      Singleton.instance = new Singleton()
    }


    return Singleton.instance;
  }

}

// const s1 = new Singleton() //直接初始化会报错
// Singleton.instance // 直接访问 instance 也会报错


// 创建实例
const s1 = Singleton.getInstance()
const s2 = Singleton.getInstance()

console.log(s1 === s2); //true

使用闭包特性实现单实例模式

function genGetInstance() {
    let instance // 闭包





    class Singleton {}


    return () => {
        if (instance == null) {
            instance = new Singleton
        }
        return instance
    }


}



const getInstance = genGetInstance()


const s1 = getInstance()
const s2 = getInstance()
console.log(s1 === s2); //true

在函数内部封装了 getInstance ，内聚，解耦，符合对扩展开放，对修改封闭的原则。

使用场景：

• 自定义事件 eventBus 全局只有一个
• Vuex Redux store 全局只有一个

观察者模式

它定义了对象间的一种一对多的依赖关系，只要当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

在前端领域的使用场景有：

• DOM 事件
• Vue React 组件的生命周期
• Vue 的 watch 监听
• 定时器（setTimeout，setInterval）
• Promise then回调

Subject 和 Observer 是一对多的关系

class Subject {
  private state: number = 0;
  private observers: Observer[] = [];



  getState(): number {
    return this.state;
  }

  setState(newState: number) {
    this.state = newState
    this.notify()
  }
  // 通知所有观察者
  private notify() {
    for (const observer of this.observers) {
      observer.update(this.state);
    }

  }

  // 添加观察者
  attach(observer: Observer) {
    this.observers.push(observer);
  }
}

// 观察者
class Observer {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  update(state: number) {
    console.log(`${this.name} update, state is ${state}`);
  }
}

const sub = new Subject()
const observer1 = new Observer('A');
sub.attach(observer1);
const observer2 = new Observer('B');
sub.attach(observer2);

sub.setState(1) //更新状态，触发观察者 update

Observer 类和 Target 类分离，解耦，Observer 类可自由扩展，Target 可自由扩展，符合设计原则。

发布订阅模式也是一种常见的观察者设计模式

发布订阅模式，Publisher 和Observer相互不认识，中间有媒介。

明显的区别：发布订阅模式需要在代码中触发 emit ，而观察者模式没有 emit

使用场景：Vue2 中的自定义事件。

迭代器模式

用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。

for 循环不是迭代器模式，因为for循环需要知道对象内部结构

简易迭代器，并不知道他的内部结构，forEach 就是最简易的迭代器。

使用的场景：JS 有序对象，都内置迭代器

• 字符串
• 数组
• NodeList 等 DOM 集合
• Map
• Set
• arguments

for…of

所有有序结构，都支持 for…of 语法

实现：

class DataIterator {
  private data: number[]
  private index = 0



  constructor(container: DataContainer) {
    this.data = container.data;
  }

  next(): number | null {
    if (this.hasNext()) {
      return this.data[this.index++]
    }


    return null
  }

  hasNext() {
    if (this.index >= this.data.length) return false;
    return true;
  }

}

class DataContainer {
  data: number[] = [10, 20, 30, 40, 50]
  getIterator() {
    return new DataIterator(this);
  }
}

const container = new DataContainer()
const iterator = container.getIterator()
while (iterator.hasNext()) {
  const num = iterator.next()
  console.log(num);
}

使用迭代器模式，使用者和目标数据分离，解耦。目标数据自行控制内部迭代逻辑。使用者不关心目标数据的内部结构

ES6 的迭代器和生成器

// 基本使用
function* genNums() {
    yield 10
    yield 20
    yield 30
}


const numsIterator = genNums()
numsIterator.next() // {value: 10, done: false}
numsIterator.next() // {value: 20, done: false}
numsIterator.next() // {value: 30, done: false}
numsIterator.next() // {value: undefined, done: true}


//yield* 语法
function* genNums() {
    yield* [100, 200, 300] // 相当于：循环数组，分别 yield
}

const numsIterator = genNums()
numsIterator.next() // {value: 100, done: false}
numsIterator.next() // {value: 200, done: false}
numsIterator.next() // {value: 300, done: false}
numsIterator.next() // {value: undefined, done: true}

简易的实现自定义迭代器

class CustomIterator {
    private data: number[]





    constructor() {
        this.data = [10, 20, 30]
    }



    * [Symbol.iterator]() {
        yield* this.data
    }

}

const iterator = new CustomIterator()
for (let n of iterator) {
    console.log(n)
}

使用yield 遍历 DOM 树

function* traverse(elemList: Element[]): any {
    for (const elem of elemList) {
        yield elem



        const children = Array.from(elem.children)
        if (children.length) {
            yield* traverse(children)
        }
    }


}


const container = document.getElementById('container')
if (container) {
    for (let node of traverse([container])) {
        console.log(node)
    }

}

原型模式

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

JS 中所有函数都有一个 prototype 属性。

JS 所有的引用类型对象都是通过函数创建的，都有 __proto__ ，指向其构造函数的 prototype

一个对象的 __proto__ 指向它构造函数的 prototype ，而 prototype 本身也是一个对象，也会指向它构造函数的 prototype ，于是就形成了原型链。

const obj = {} // 相当于 new Object()
obj.__proto__ === Object.prototype





const arr = [] // 相当于 new Array()
arr.__proto__ === Array.prototype


const f1 = new Foo('张三', 20)
f1.__proto__ === Foo.prototype
const f2 = new Foo('李四', 21)
f2.__proto__ === Foo.prototype

在 JS 中最符合原型模式的应用场景就是 Object.create ，它可以指定原型。

const obj1 = {}
obj1.__proto__





const obj2 = Object.create({x: 100})
obj2.__proto__ 

JS 中并不常用原型模式，但 JS 对象本身就是基于原型的

装饰器模式

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。

使用场景：Angular 定义组件

import { Component, OnInit } from '@angular/core';


// 装饰器，定义 class 为组件
@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

react-redux

import { connect } from 'react-redux'


// 装饰器
@connect(mapStateToProps, mapDispatchToProps)
export default VisibleTodoList extends React.Component { }

通过使用装饰器模式，为现有对象添加新的功能。装饰器和目标分离，解耦。装饰器可自行扩展。目标也可自行扩展。

代理模式

为其他对象提供一种代理以控制对这个对象的访问。

使用场景：

DOM 事件代理

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>

<script>
    var div1 = document.getElementById('div1')
    div1.addEventListener('click', function (e) {
        var target = e.target
        if (e.nodeName === 'A') {
            alert(target.innerHTML)
        }
    })
</script>

webpack devServer

// webpack.config.js
module.exports = {
  // 其他配置...
  devServer: {
    proxy: {
      '/api': 'http://localhost:8081',
    },
  },
};

nginx 反向代理

server {
    listen   8000;
    location / {
        proxy_pass http://localhost:8001;
    }
    location /api/ {
        proxy_pass http://localhost:8002;
        proxy_set_header Host $host;
    }


}

Proxy

Vue3 就使用 Proxy 做 data 响应式。

简易的实现代理模式

class RealImg {
    fileName: string
    constructor(fileName: string) {
        this.fileName = fileName
        this.loadFromDist()
    }

    display() {
        console.log('display...', this.fileName)
    }


    private loadFromDist() {
        console.log('loading...', this.fileName)
    }
}

class ProxyImg {
    readImg: RealImg
    constructor(fileName: string) {
        this.readImg = new RealImg(fileName)
    }
    display() {
        this.readImg.display()
    }
}

const proxImg = new ProxyImg('xxx.png') // 使用代理
proxImg.display()

ES6 中的 Proxy

const user = {
    name: '张三'
}
const proxy = new Proxy(user, {
    get(target, key) {
        console.log('get...')
        return Reflect.get(target, key)
    },
    // get(...args) {
    //     return Reflect.get(...args)
    // },
    set(target, key, val) {
        console.log('set...', val)
        return Reflect.set(target, key, val)
    }
})


proxy.name = '李四'
console.log(proxy.name)

最后的话

到这里讲完了前端的7中常用设计模式，相信你已经可以在实际开发过程中，遇到一些代码时，能够说出它用到了什么设计模式，这有助于你能更进一步学习其中的原理。本文只是入门文章，在以后的工作学习中需要更进一步学习。

欢迎关注作者，之后一起学习，更进一步。