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

23种设计模式

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

浏览器中的设计模式

• 单例模式 定义：全局唯一访问对象 应用场景：缓存，全局状态管理等 用单例模式实现请求缓存
• 发布订阅模式 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛 const button = document.getElementById("button"); const doSomthing1 =()=>{ console.log("Send message to User"); const doSomthing2 = ()=>{ console.log("Log..."); }; button.addEventListener("click",doSomthing1); button.addEventListener("click",doSomthing2) ;}

javascript中的设计模式

• 原型模式 定义：复制已有对象来创建新的对象 应用场景：js中对象创建的基本模式
• 代理模式 定义：可自定义控制对象的访问方式，并且允许在更新前后做一些额外处理 应用场景：监控，代理工具，前端框架实现等等
• 迭代器模式 定义：在不暴露数据类型的情况下访问集合中的数据 应用场景：数据结构中有多种数据类型，列表，树等，提供通用的操作接口 const numbers = [1,2,3]; 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){ //... }

前端框架中的设计模式

• 代理模式 前端框架中对DOM操作的代理 更改DOM属性->视图更新 更改DOM属性->更新虚拟DOM->视图更新
• 组合模式 定义：可以多个对象组合使用，也可以单个对象独立使用 应用场景：前端组件，文件目录，部门 react的组件结构 export const Count =()=>{ const [count,setCount]=userState(0); return ( <button onclick={()=>setCount((count)=>count+1)}> count is :{count} </button> ); }

总结

设计模式并不是单一的某种方法也没有固定的适用场景。套用到场景中非常困难。 现代编程语言的多编程范式带来更多的可能性。需要不断实践学习设计模式。