这是我参与「第四届青训营 」笔记创作活动的第4天

前端设计模式应用

什么是设计模式

软件设计中常见问题的解决方案模型

• 历史经验的总结
• 与特定语言无关

设计模式背景

• 模式语言:城镇、建筑、建造 (A Pattern Language: Towns, Buildings,Construction) 1977
• 设计模式:可复用面向对象软件的基础 (Design Patterns: Elements of ReusableObject-Oriented Software)1994

设计模式分类

23种设计模式

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

浏览器中的设计模式

单例模式

定义

全局唯一访问对象

应用场景

缓存，全局状态管理等。

用单例模式实现请求缓存

import { api } from "./utils";
​
const cache: Record<string, string> = {};
​
export const request = async (url: string) => {
    if (cache[url]) {
        return cache[url];
    }
    
    const response = await api(url);
    
    cache[url] = response;
    return response;
};
​

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);
});

发布订阅模式

定义

一种订阅机制,可在被订阅对象发生变什时通知订阅者。

应田场景

从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等，应用广泛。

用发布订阅模式实现用户上线订阅

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 = [];
    }
    
    subscribe(user: User, notify: Notify) {
        user.followers.push(i user, notify });
    }
    online(){
        this.status = "online";
        
        this.followers.forEach(({ notify })=>{
            notify(this);
        });
    }
}
​

test( "should notify followers when user is online for multiple users",() => {
    const user1 = new User("user1");
    const user2 = new User("user2");
    const user3 = new User("user3");
    const mockNotifyUser1 = jest.fn();
    const mockNotifyUser2 = jest.fn();
    user1.subscribe(user3, mockNotifyUser1);
    user2.subscribe(user3, mockNotifyUser2);
    user3.online();
    expect(mockNotifyUser1).toBeCalledwith(user3);
    expect(mockNotifyUser2).toBeCalledWith(user3);
});
​

JavaScript中的设计模式

原型模式

定义

复制已有对象来创建新的对象

应用场景

JS中对象创建的基本模式

用原型模式创建上线订阅中的用户

const baseUser: User = {
    name: "",
    status: "offline" ,followers: []，
    subscribe(user,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;
};

test( "should notify followers when user is online for user prototypes",() => {
    const user1 = createUser( "user1");
    const user2 = createUser( "user2");
    const user3 = createUser( "user3");
    const mockNotifyUser1 = jest.fn();
    const mockNotifyUser2 = jest.fn();
    user1.subscribe(user3, mockNotifyUser1);
    user2.subscribe(user3, mockNotifyUser2);
    user3.online();
    expect(mockNotifyUser1).toBeCalledwith(user3);
    expect(mockNotifyUser2).toBeCalledWith(user3);
});

代理模式

定义

可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景

监控，代理工具，前端框架实现等等

用代理模式实现用户状态订阅

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 = [];
    }
    subscribe(user: User, notify: Notify) {
        user.followers.push(i user, notify });
    }
    online( {
        this.status = "online " ;
        this.followers.forEach(({ notify }){
            notify(this);
        });
    }
}

type Notify = (user: User) => void;
class User {
    name: string;
    status: "offline" l "online" ;
    followers: { user: User; notify : Notify }[];
    constructor(name : string){
        this.name = name;
        this.status = "offline ";
        this.followers = [];
    }
    subscribe(user: User, notify: Notify) {
        user.followers. push(i user, notify });
    }
    online() {
        this.status =  "online";
    }
}

export const createProxyUser = (name: string) =>{
    const user = new User(name);
    const proxyUser = new Proxy(user,{
        set: (target, prop : keyof User, value) => {
            target[prop] == value;
            if (prop"status" ) {
                notifyStatusHandlers(target, value);
            }
            return true;
        },
    });
    const notifyStatusHandlers = (user: User,status: "online" |"offline") => {
        if (status=="online") {
            user.followers.forEach(({ notify }) => {
                notify(user);
            });
        }
    };
    return proxyUser;
};

迭代器模式

定义

在不暴露数据类型的情况下访问集合中的数据

应用场景

数据结构中有多种数据类型,列表，树等，提供通用操作接口

前端框架中的设计模式

代理模式

前端框架中对DOM操作的代理

更改DOM属性===>视图更新 更改DOM属性===>更新虚拟DOM===>视图更新

组合模式

定义

可多个对象组合使用，可也单个对象独立使用

应用场景

DOM，前端组件，文件目录，部门

总结

设计模式不是银弹

• 总结出抽象的模式相对比较简单,但是想要将抽象的模式套用到场景中却非常困难
• 现代编程语言的多编程范式带来的更多可能性
• 真正优秀的开源项目学习设计模式并不断实践