前端设计模式
前端设计模式
一、设计模式背景
- 模式语言：模式语言:城镇、建筑、建造(A Pattern Language: Towns, Buildings, Construction)1977
- 设计模式：可复用面向对象软件的基础(Design Patterns: Elements of Reusable Object-Oriented Software)1994
二、设计模式趋势
23种设计模式
- 创建型 -如何创建一个对象
- 结构型 -如何灵活的将对象组装成较大的结构
- 行为型 -负责对象间的高效通信和职责划分
三、浏览器中的设计模式
单例模式
定义：全局唯一访问对象
应用场景：缓存、全局状态管理
例子：用单例模式实现请求缓存1（Typescript）
仅为举例，上述为传统单例
例子：用单例模式实现请求缓存2（Javascript）
发布订阅模式（观察者模式）
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
例子：用发布订阅模式实现用户上线订阅（Typescript）
四、Javascript中的设计模式
- 原型模式
- 代理模式
- 迭代器模式
原型模式
定义：复制已有对象来创建新的对象
应用场景：JS中对象创建的基本模式
例子：用原型模式创建上线订阅中的用户
在其他源中基本不用原型创建对象
代理模式
定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
应用场景：监控（成功率、聊天记录），代理工具（业务场景），前端框架实现（劫持、代理）等等。
例子：使用代理模式实现用户状态订阅
上述代码是
容易变得麻烦，比如添加日志等会变得很复杂
下面用代理模式优化
迭代器模式
定义：在不暴露数据类型的情况下访问集合（数组、map、set等）中的数据。
应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口。
例子：用for of迭代所有组件
这个方法可以使组件变成可迭代的
五、前端框架中的设计模式
- 代理模式
- 组合模式
代理模式
前端框架中对DOM操作的代理
DOM更新后的钩子
组合模式
定义：可多个对象组合使用，可也单个对象独立使用
应用场景：前端组件，文件目录，部门DOM，
React的组件结构
版权申明
由 Typecho 强力驱动, 版本 1.2.1
全部评论 3
flegybpgsp
Google Chrome Windows 10fskoekwaej
Google Chrome Windows 10naaoujwrap
Google Chrome Windows 10