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

什么是设计模型？

设计模型是软件设计中常见问题的解决方案模型。常见问题会根据历史经验总结给出方案，解决方案模型与特定语言无关，是一种思想模式，而不是特定方法。

设计模式分类

• 创建型-如何创建一个更灵活的对象来使用
• 结构型-将创好的对象如何灵活的组装成较大的结构
• 行为型-负责对象间的高效通信和职责划分，比如谁先做谁后做什么事情

浏览器中的设计模式

单例模式

  定义：全局唯一访问对象。最常用的就是window。
  应用场景：缓存，全局状态管理等

发布订阅模式

  定义：一种订阅机制，可在被订阅对象发生编号
  应用场景：从系统架构中间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等，应用广泛。
  

const b=document.getElementById("button")
function doSom(){console.log("Ok")}
b.addEventListener("click",doSom)

用发布订阅模式实现用户上线订阅

Javascript中的设计模式

原型模式

    定义：负责已有对象来创建新的对象
    应用场景：JS中创建的基本模式

代理模式

    定义：可自定义控制对原对象的访问方式，并且分许在更新前后做些额外外理。改一个值或者对象的属性可以做一定的控制。

    应用场景：健康、代理工具、前端框架实现等

迭代器模式

    定义：在不暴露数据类型的情况下访问集合中的数据。集合指的是数组，map是一个key、value的集合，set是一个关于key的集合等，在不知道是数组还是其他而拿到数据。
    应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口
    

可以用for of迭代所有组件，给任意一个对象添加一个Symbol.iterator方法，可让组件可迭代。

前端框架中的设计模式

代理模式

   前端框架中对DOM操作的代理：更改DOM属性->更新虚拟DOM->视图更新

组合模式

定义：可多个对象组合使用，可也单个对象独立使用
应用场景：DOM,前端组件，文件目录，部门

总结

了解设计模式能够让我们更好的写出规范的代码，我们应该多思考多看一些设计模式，让程序更加规范。勤加时间练习。