图解 JS、React、Vue 设计模式

今天来分享一个免费在线学习 JS、React、Vue 设计模式的网站，该网站旨在为 JavaScript 设计、渲染和性能模式带来现代视角，使用普通 JavaScript 或现代框架构建功能强大的 Web 应用！

网站总共包含三部分：

• JavaScript 模式：专注于纯 Javascript 和 Node.js 的模式；

• React 模式：专注于 React 和 Next.js 的模式；

• Vue 模式：专注于 Vue.js 的模式。

作者都是大佬级别：

• Lydia Hallie：就职于 Vercel，软件工程顾问和教育家，主要使用 JavaScript、React、Node、GraphQL 和 Severless 技术。

• Addy Osmani：负责 Google Chrome 的工程经理。他领导着一个开发人员工具团队，专注于提高 Web 速度。他的团队致力于 Lighthouse、PageSpeed Insights、Chrome 用户体验报告等项目。

每个模式都使用图解、交互式的方式来讲解，更易于理解。

JavaScript 模式

JavaScript 模式包括 3 大类 24 个：

• 设计模式：

• 单例模式

• 代理模式

• 原型模式

• 观察者模式

• 模块模式

• 混合模式

• 中间件模式

• 享元模式

• 工厂模式

• 渲染模式：

• 岛屿架构

• 渲染模式

• 动画视图转换

• 性能模式：

• 拆包

• 压缩 JavaScript

• 动态导入

• 交互导入

• 导入可见性

• 优化加载顺序

• 预取

• 预加载

• PRPL 模式

• 优化第三方加载

• Tree Shaking

• 虚拟列表

React 模式

React 模式包括 2 大类 13 个：

• 设计模式

• 复合组件模式

• HOC 模式

• Hooks 模式

• 容器/展示模式

• Render Props 模式

• 渲染模式

• 客户端渲染

• 增量静态生成

• 渐进补水

• 选择性补水

• React 服务端组件

• 服务端渲染

• 静态渲染

• 流式服务端渲染

Vue 模式

Vue 模式是最新发布的，包括了 3 大类 11 个：

• 设计模式

• 组件

• 可组合

• 容器/展示模式

• 数据提供者模式

• 动态组件

• Provide/Inject

• <script setup>

• 状态管理

• 渲染模式

• 渲染函数

• 无渲染组件

• 性能模式

• 异步组件

小结

网站：https://www.patterns.dev/

网站上还提供了电子书可供下载：