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

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

设计模式分类

创建型

如何创建一个对象

结构型

如何灵活的将对象组装成较大的结构

行为型

负责对象间的高效通信和职责划分

浏览器中的设计模式

单例模式

定义：

全局唯一访问对象

应用场景：

缓存，全局状态管理等

用单例模式实现请求缓存

import {api} from './utils';
//定义全局唯一的对象，cache
const cache:Record<string,string> = {}
export const request =  async (url:string)=>{
    //如果cache里面有这个，那么直接返回原来的
    if(cache[url]){
        return cache[url]
    }
    //没有的话，就调用api去获取
    const response = await api(url)
    //并且进行存储
    cache[url] = response;
    return response
}

发布订阅模式

定义

一种订阅机制，可在被订阅对象发生变化时通知订阅者

使用场景

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

例子

const button = document.querySelector('button');
const dosomething = ()=>{
    console.log("做什么")
}
button.addEventListener("click",doSomething)

这个例子里，我们可以认为button就是一个订阅对象，订阅者就是这个函数

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

代理模式

定义

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

应用场景

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

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

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

迭代器模式

定义：

在不暴露数据结构的情况下访问集合中的数据

应用场景

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

前端框架中设计模式

代理模式

前端矿建对DOM操作的代理

graph LR
	id1[更改DOM属性]-->id2[视图更新]
	id3[更改DOM属性]-->id4[更新虚拟DOM]--diff-->id5[视图更新]

组合模式

定义：

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

应用场景：

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

react的组件结构

function App(){
    return (
    <div>
            <Header></Header>
            <count></count>
            <Footer></Footer>
    </div>
    )
}