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

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

今天的课程讲的是设计模式。

首先是设计模式的概念：软件设计中常见设计中解决方案模型。

背景大概就是1997年的《模式语言：城镇，建筑，建造》和1994年的《设计模式可复用面向对象软件的基础》。

根据老师的介绍将23种设计模式分为3大类：

• 创建型-如何创建一个对象
• 结构型-如何灵活的将对象组装成较大的结构
• 行为型-负责对象间的高效通信和职责划分

下面介绍浏览器中的模式：

• 单例模式
• 发布订阅模式

单例模式的定义就是全局唯一访问对象。应用场景有缓存，全局状态管理等。

老师展示用单例模式实现缓存，按照我的理解单例模式就是软件中的组件都使用了唯一一个对象的数据，包括增删改查。我认为根据登录状态判断查看页面权限是一个单例模式。我们页面的用户信息都是来自一个用户对象，且这个对象是可以全局使用的。

发布订阅模式：一种订阅机制，可在被订阅对象发生改变时通知订购者。应用场景从系统架构之间的解耦，到业务中一些应用例如邮件订阅，上线订阅等。 Vue中实现不同组件中传递数据，就是此模式。

javascript中的设计模式

• 原型模式
• 代理模式
• 迭代器模式

原型模式:复制已有对象来创建新对象，类似于创建对象模板。
应用场景：js中创建对象的基本模式
我认为Vue中插槽中的作用域插槽可以算是原型模式的一种应用。
代理模式：可以自定义控制访问原对象的方式，并允许在更新前后做一些额外处理。
应用场景：监控，代理仓库，前端框架实现等。
Vue 中将配置属性中data缓存后的_data代理到vm上
迭代器模式:在不暴露数据类型的情况下，访问集合中的数据 应用场景：数据结构中用多种数据类型，列表，树等，提供通用操作接口。

前端框架中的设计模式

• 代理模式
• 组合模式

代理模式老师通过Vue数据代理--计数器的例子讲述，更改DOM属性时，首先更新虚拟DOM,再diff后视图更新。
diff指diff算法:
虚拟DOM中采用的算法；把树形结构按照层级分解，只比较同级元素。不同层级的节点只有创建和删除操作；给列表结构的每个单元添加唯一的 key 属性，方便比较。页面的数据变化时，Diff算法会比较同层级节点。当有唯一标识的时候，虚拟DOM可以识别位置，更新相应节点；无唯一标识的时候，会更新同层级节点。数据量大的时候明显更快。 组合模式：可以多个对象组合使用，也可以单个对象独立使用 应用场景：DOM，前端组件，文件目录，部门。例如React的组件结构

function App() { 
  return (
    <div className="App">
      <Header />
      <Count />
      <Footer />
    </div>
  );
}