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

前端设计模式应用

什么是设计模式

• 概念：软件设计中常见的解决方案模型
• 历史经验的总结
• 与特定语言无关

设计模式分类

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

浏览器中的设计模式

• 单例模式
  • 定义：全局唯一访问对象
  • 应用场景： 缓存，全局状态管理等
• 用单例模式实现请求缓存

传统单例实现方法，使用class

import{api} from "./utils"
export class request{
    //创建静态方法instance，存储全局唯一的实例
    static instance:request;
    //创建缓存对象存储缓存
    private cache:record<string,string>;
    constructor(){
        //初始化空缓存
        this.cache={};
    }
    //单例内容
    //不使用new Request创建对象，使用该方法创建对象
    static getInstance(){
        if(this.instance){
            return this.instance;
        }
        //第一次创建一个新的对象，后面都用同一个
        this.instance=new request();
        return this.instance;
        }
    public async request(url:string){
        //如果缓存池中有该url内容则返回缓存池中的
	if(this.cache[url]){
		return this.cache[url];
	}
        //如果没有则调用api并将其写入缓存中
	const response = await api(url);
	this.cache[url]=response;
	return response;
    }

}	

JavaScript实现单例，不用Class

import {api} from "./utils";
//定义一个空的缓存对象,作为全局唯一对象
const cache:Record<String,String> = {},
export const request = async(url:string)=>{
	//如果缓存池中有该url则直接使用,否则调用api并存入缓存
	if(cache[url]){
		return cache[url];
	}
	const response = await api(url);
	cache[url] = response
	return responsel
}

如何使用： 与传统面向对象不同的是，传统面向对象需要New一个Class对象去调用，而JavaScript只要import的是这个request，所有结果都是反馈给同一个request，可以更灵活的实现单例模式。

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;
	export(costTime).toBeLessThan(50);
})

• 发布订阅模式
  • 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者
  • 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅，Vue中的一些消息通信机制等，应用广泛
  • 案例：用发布订阅模式实现用户上线订阅

type Notify = （user:User） => void;	
export class User{
    name : string;
    status:"online" | "offline";
    followers:{user::User;nofify:Notify}[];
    constructor(name: string)(
        //初始化user
        this.name = name;
        this.status = "offline"
        this.followers= [];
    )
    subscribe(user:User,nofify:Notify){
        //给订阅的用户添加自己并且添加订阅函数
         user.followers.push({user，nofify})
     }
    online() {
        //将状态改为online表示有人上线了
        this.status = “online”；
        //通知订阅的人，调用订阅函数
        this.followers.forEach(({nofify))=>{
            notify(this);
        }
     }
}

//测试函数
test("nofify followers when user is online",()=>{
       const user1 = new User("user1");
       const user2 = new User("user2")
       const user3 = new User("user3")        
       const mockNotifyUser1 = jest.fn();
       const mockNotifyUser2 = jest.fn();
       user1.suscribe(user3,mockNotyfyUser1);
       user2.suscribe(user3,mockNotyfyUser2);
       user3.online();
       expect(mockNotyfyUser1).toBeCalledWith(user3);
       expect(mockNotyfyUser2).toBeCalledWith(user3);
   })

JavaScript中的设计模式

原型模式

• 定义：复制已有对象来创建新的对象
• 应用场景：JS中对象创建的基本模式
• 案例：用原型模式创建上线订阅中的用户

const bassUser:user={
    name:"",
    status:"offline",
    followers:[],
    subscribe(user,notify){
	user.followers.push({user,notify});
    },
    online (){
        this.status="online";
        thiis.follower.forEach(({notify})=>{
            notify(this);
        });
    },
};
    
export const createUser =(name:string)=>{
    //基于baseUser创建一个新的对象，baseUser作为原型，实际是继承关系
    const user:User = object.create(baseUser);
    user.name=name;
    user.followers =[];
    return user;
};

//测试函数
//不在亲自new对象，使用createUser创建对象
test("nofify followers when user is online",()=>{
       const user1 = createUser("user1");
       const user2 = createUser("user2")
       const user3 = createUser("user3")        
       const mockNotifyUser1 = jest.fn();
       const mockNotifyUser2 = jest.fn();
       user1.suscribe(user3,mockNotyfyUser1);
       user2.suscribe(user3,mockNotyfyUser2);
       user3.online();
       expect(mockNotyfyUser1).toBeCalledWith(user3);
       expect(mockNotyfyUser2).toBeCalledWith(user3);
   })

代理模式

• 定义： 可以自定义控制原对象的访问方式，并且允许在更新前后做一些额外处理（类似于hook）
• 应用场景：监控，代理工具，前端框架实现等等
• 使用代理模式实现用户状态订阅

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({user.notufy});
    }   
    online(){
        //修改状态并通知订阅自己的人
        this.status ="online";
        this.followers.forEach(({notify})=>{
            notify(this);
    });
        
}

export const createProxyUser =(name:string)=>{
    const user = new User(name);
    //创建代理用户
    //js中的proxy的api，接收2个参数，第一个参数是需要代理的对象，第二个是代理操作包括get，set
    const proxyUser = new Proxy(user,{
        //set函数设置原本对象属性
        set:(target,prop:keyof User,value)=>{
             //设置属性名称和值
            target[prop] = value;
             if(prop === 'status'){
                  notyfyStatusHandlers(target,value);
             }
             return true;
        }
    })
    const notyfyStatusHandlers=(user: User,status:"online"|"offline")=>{
        if(status==="online"){
             user.follower.forEach(({notify})=>{
                 notify(user);
             })
        }
    }
    return proxyUser;
}

迭代器模式

• 定义：在不暴露数据类型的情况下访问集合中的额数据
• 应用场景：数据结构中有多重数据类型，列表，树等提供通用操作接口
• Demo

const map =new Map();
map.set("k1","v1");
map.set("k2","v2");
const set = new Set(["1","2","3"]);
for(const number of numbers){
    //...
}
for(const [key,value] of map){
    //...
}
for(const key of set){
    //...
}

• 用for of迭代自定义组件

class MyDomElement{
  tag: string;
  children: MyDomElement[];
  constructor(tag: string){
    this.tag = tag;
    this.children=[];
  }
  addChildren(component: MyDomElement){
    this.children.push(component);
  }
  //该方法让组件变成可迭代的
  [Symbol.iterator](){
      //初始化list
    const list = [...this.children];
    let node;
    return {
      next: ()=>{
         //每次拿到子组件上一个独立的node，如果node有children，就push到list上（先序遍历）
        while((node=list.shift())){
          node.children.length>0&&list.push(...node,this.children);
          return {value:node,done:false};
        }
        return{value:null,done:true};
      }
    }
  }
}

前端框架中的设计模式

代理模式

• Vue中DOM的操作实际上是通过代理更新虚拟DOM
• Vue组件实现计数器

<template>
  <button @click="count++">count is: {{count}}<button>
</template>
<script setup lang="ts">
import{ref} from "vue";
const count =ref(0)
</script>

组合模式

• 定义：可以多个多想组合使用，也可以单个对象独立使用
• 应用场景：DOM，前端组件，文件目录，部门
• React的组件结构

export const Count =()=>{
  const [count,setCount] = useState(0);
  return(
    <button onClick={()=>setCount((count)=>count+1)}>
      count is: {count}
    </button>
  )
}

function App(){
    return(
        <div className="App"> 
            <Hesder />
            <Count />
            <Footer />
        </div>
    );
    }