这是我参与「第四届青训营 」笔记创作活动的第3天
开篇提出问题--什么是设计模式？
- 软件设计中常见问题的解决方案模型
- 历史经验总结（常见问题）
- 与特定语言无关（解决方案的模型）
发展背景
-
01模式语言：城镇，建筑，建造（1977）
-
02设计模式：可复用面向对象软件的基础（1994）
23种设计模式
| 创建型 | 结构型 | 行为型 |
|---|---|---|
| 如何创建一个对象 | 如何灵活的将对象组装成较大的结构 | 负责对象间的高效通信和职责划分 |
浏览器中的设计模式
| 模式 | 定义 | 应用场景 |
|---|---|---|
| 单例模式 | 全局唯一访问对象 | 缓存，全局状态管理等 |
| 发布订阅模式 | 一种订阅机制，可在被订阅对象发生变化时通知订阅者 | 从系统架构之间的解耦，到业务中一些实现模式 |
Javascript中的设计模式
| 模式 | 定义 | 应用场景 |
|---|---|---|
| 原型模式 | 复制已有对象来创建新的对象 | JS中对象创建的基本模式 |
| 代理模式 | 可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理 | 监控，代理工具，前端框架实现 |
| 迭代器模式 | 在不暴露数据类型的情况下访问集合中的数据 | 数据结构中许多数据类型，列表，树等提供通用操作接口 |
- 用for of 迭代所有组件
class MyDomElement{
tag:string;
children:MydomElement[];
constructor(tag:string){
this.tag=tag;
this.children=[];
}
addChildren（component:MyDomElement){
this.children.push(component);
}
[Symbol.iterator](){ //Symbol用来当作迭代器识别函数
const list=[...this.children];
let node;
return{
next:()=>{
while((node=list.shift())){
node.child,length>0&&list.push(...node.children);
return {value:node,done:false};
}
return {value:null,done:true};
}
}
}
}
前端框架中的设计模式
- 代理模式（区别于前面的代理模式）
- 组合模式（与前面的迭代器模式类似）
代理模式
原生DOM操作
stateDiagram-v2
[*] --> 更改DOM属性
更改DOM属性 --> 视图更新
前端框架虚拟dom操作（MVVM模式）
stateDiagram-v2
[*] --> 更改DOM属性
更改DOM属性 --> 更新虚拟DOM
更新虚拟DOM --> 视图更新
组合模式
- 定义：可多个对象组合使用，也可单个对象独立使用
- 应用场景：DOM，前端组件，文件目录，部门
今日学习总结
今天学习的内容是前端设计模式，涉及到了许多新的内容，诸如Typescript,vue,react的一些内部实现原理，迭代器的设计模式，虚拟DOM的设计模式等，有复习也有新的理解。
老师最后总结如下：
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来更多的可能性
- 真正优秀的开源项目学习设计模式并不断实践
