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

这是我参与「第四届青训营 」笔记创作活动的的第7天。 一、本节课重点内容:

本节课使用了TypeScript例程进行讲解,以请求缓存应用常见为例, 重点讲解了:单例模式

二、课堂知识点纪要:

浏览器api设计模式

• 用单例模式实现请求缓存:

  单例模式只会定义唯一的访问对象,当函数需要调用时，都是从全局引入同一对象。常用于缓存和全局状态管理

const cache；React: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;
}
//封装一个异步请求

//请求缓存
 eg(“response 2 times”) ,async （）=>{
     await request("/user/114514")
     const start = new Date();
     await request("/user/114514")
     const end = new Date();
     const delta = end - start;
     expect(costTime).toBeLessThan(50);
     });

• 用发布订阅模式实现请求缓存: 当被订阅对象变化时通知订阅者。常见应用有:邮件系统、动态系统。

• JS代码设计模式

原型模式

复制已有对象创建新对象,class类;创建对象时很方便

代理模式

自定义控制对元的对象访问，并且允许更新前后处理;多用于监控和代理等。

迭代器

可以实现隐藏数据类型的访问。适用于复杂数据结构的解析，提供通用操作接口。 常见的有数组、列表、树的混用。

const Int = [0,1,2]; = const set = new Set(["0","1","2"]) const Mapy = new Map(); Mapy.set（"X","Y"）;

• 框架组合模式:

  • 使用框架组合搭建组件时，可以多个对象组和使用,也看可以单个对象独立用;
  • 常用于DOM、 组件、 文件目录。

通过今天的课程，粗浅的学习了软件设计（前端）的五种设计模式,让我对前端的系统理论有了新的认识，觉得自己水平还是优先,需要在日后学习中继续提升！