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

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

• 设计模式背景

  1. 模式语言：城镇、建筑、建造
  2. 设计模式：可复用面向对象软件的基础

• 设计模式趋势

• 设计模式分类

23种设计模式

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

浏览器中的设计模式

• 单例模式

  • 定义 -> 全局唯一访问对象

  • 应用场景 -> 缓存，全局状态管理等

使用单例模式实现请求缓存

在不同情况下使用相同的用户缓存，以提高性能

关于TypeScript TypeScript 教程 | 菜鸟教程 (runoob.com)

发布订阅模式

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

JavaScript中的设计模式

• 原型模式
  • 定义 -> 复制已有对象来创建新的对象
  • 应用场景 -> JS中对象创建的基本模式
• 代理模式
  • 定义 可自定义控制对原对象的访问方式，并且允许更新前后做一些额外处理
  • 应用场景 监控，代理工具，前端框架实现等
• 迭代器模式
  • 定义 在不暴露数据类型的情况下访问集合中的数据
  • 应用场景 数据结构中有多种数据类型，列表，数等，提供通用操作接口
  使用for of迭代所有组件
  Symbol.iterator{} 将组件变为可迭代类型

前端框架中的设计模式

• 代理模式
• 组合模式
  • 定义 可多个对象组合使用，也可单个对象独立使用
  • 应用场景 DOM，前端组件，文件目录，部门 前端框架中对DOM操作的代理

React的组件结构

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

总结：设计模式并不是银弹，不能解决所有问题

• 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
  
• 现代编程语言的多编程范式带来的更多可能性