设计模式分类

在书《设计模式：可复用面向对象软件的基础》中有23种设计模式，分为以下三种类型：

- 创建型设计模式：如何创建一个对象
- 结构型设计模式：如何灵活地将对象组装成较大的结构
- 行为型设计模式：负责对象间的高效通信和职责划分

前端中的设计模式

浏览器API中的设计模式

单例模式

存在全局唯一访问对象
应用场景：缓存、全局状态管理等；

// 用单例模式实现请求缓存
test("should response quickly second time", async() => {
    await request("/user/1");
    const startTime = Date.now();
    await request("/user/1");
    const endTime = Date.now();

    const costTime = endTime - startTime;

    expect(costTime).toBeLessThan(50);
});

发布订阅模式

一种订阅机制，在被订阅对象发生变化时通知订阅者
应用场景：从系统架构之间的解耦，到业务中一些实现模式，e.g.邮件订阅、上线订阅等等，应用广泛。

// 用发布订阅模式实现用户上线订阅
type Notify = (user: User) => void;

export class User {
    name: string;
    status: "offline" | "online";
    followers: { user: User; notify: Notify }[];

    constructor(name: string) {
        this.name = name;
        this.status = "offline";
        this.followers = [];
    }

    subscrible(user: User, notify: Notify) {
        user.followers.push({ user, notify });
    }

    online() {
        this.status = "online";

        this.followers.forEach(({ nootify }) => {
            notify(this);
        });
    }
}

JavaScript中的设计模式

原型模式

复制已有对象来创建新的对象
应用场景：JS中对象创建的基本模式

// 用原型模式创建上线订阅中的用户
const baseUser: User = {
    name: "";
    status: "offline";
    followers: [],
    subscrible(user: User, notify: Notify) {
        user.followers.push({ user, notify });
    },    
    online() {
        this.status = "online";

        this.followers.forEach(({ notify }) => {
            notify(this);
        });
    },
} ;

export const createUser = (name: string) => {
    const user: User = Object.create(baseUser);

    user.name = name;
    user.followers = [];

    return user;
};

代理模式
- 可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
- 应用场景：监控、代理工具、前端框架实现等
迭代器模式
- 在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口

前端框架中的设计模式

代理模式
- 前端框架中对DOM操作的代理【更改DOM属性-更新虚拟DOM-视图更新】
组合模式
- 可多个对象组合使用，也可单个对象独立使用
- 应用场景：DOM、前端组件、文件目录、部门

前端设计模式应用 | 青训营笔记

设计模式分类

前端中的设计模式

浏览器API中的设计模式

JavaScript中的设计模式

前端框架中的设计模式