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

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

设计模式

• 软件设计中常见问题的解决方案的模型

• 历史经验、与语言无关（模型）

• 分类

  name	content
  创建型	如何创建对象
  结构型	如何组装对象
  行为型	对象职责和通信

浏览器API的设计模式

单例模式

• 定义：全局唯一访问对象

• 比如缓存、全局状态

• class Request{
      static instance:Request;
      private cache :Record<string,string>;
      constructor(){
          this.cache ={};
      }
      
      static getInstance(){
      	if(this.instance){
              return this.instance;
          }else{
              this.instance = new Request();
              return this.instance;
          }
      }//用getInstance获取实例
  }
  

• 当然，前端的缓存单例也可以直接使用一个全局的对象缓存请求单例模式而不使用类。

发布订阅

• 在被订阅对象变化时通知订阅者
• 应用于架构解耦合
• 实际上，addEventListener()就是一种发布订阅

JS中的设计模式

原型模式

• 复制已有对象来创建新的对象
• 应用于对象创建的基本模式
• Object.create 继承

代理模式

• 自定义控制对象的访问方式，并且允许额外处理
• 监控、代理、框架、响应式
• 单一职责：一个方法干一件事
• getter、setter、Proxy

迭代器模式

• 在不暴露数据类型的情况下访问集合的数据

• 数据结构中有多种数据类型，提供通用的操作接口

• class Obj{
      [Symbol.iterator](){
          //...
          return {value:value,done:true}//返回值和是否结束迭代
      }
  }
  

框架中的设计模式

代理模式

• 和API式的代理不同
• 原来：更改DOM属性->视图更新
• 框架：更改DOM属性->更新虚拟DOM->通过diff更新视图
• 也就是说DOM被代理了

组合模式

• 多个对象组合使用，也可以单个对象独立使用
• 应用于DOM，组件，目录，部门
• React中组件化

总结

• 设计模式——辩证看待
• 设计模式不是银弹——设计模式并不能解决一切问题
• 将抽象模式套用到问题中并不简单
• 多编程范式带来更多可能性
• 实践！

我的思考

关于设计模式，本人是在大一下java程序作业里第一次接触，我们首先应该明白一个重要的事情：设计模式是为了更好地解决问题而非让问题变得复杂，在脱离实际问题的情况下无意义地套用只会让开发变得困难。因此对于设计模式，我们也应该辩证看待，通过实践感悟和学习设计模式。