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

什么是设计模式

设计模式是软件设计中常见问题的解决方案模型，是历史经验的总结，与特定语言无关

设计模式大致分为23种设计模式

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

浏览器中的设计模式

单例模式

单例模式——存在一个全局访问对象，在任意地方访问和修改都会反映在这个对象上

最常用的其实就是浏览器中的window对象，提供了对浏览器的操作的封装，常用于缓存与全局状态管理等

单例模式实现请求缓存

用单例模式实现请求缓存：相同的url请求，希望第二次发送请求的时候可以复用之前的一些值

首先创建Request类，该类包含一个创建单例对象的静态方法getinstance，然后真正请求的操作为request方法，向url发送请求，若缓存中存在该url则直接返回，反之则缓存到该单例对象中。可以看到如下是上节课讲过的语法~

发布订阅模式（观察者模式）

应用非常广泛的一种模式，在被订阅对象发生变化时通知订阅者，常见场景很多，从系统架构之间的解耦到业务中的一些实现模式、邮件订阅等等。类似于添加事件

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

举个实际应用的例子：通过该模式，我们可以实现用户的相互订阅，在该用户上线时调用相应的通知函数。

如图创建了一个User类， 构造器中初始状态置为离线，其拥有一个followers对象数组，包括了该用户订阅的所有{用户，调用函数}，每次在该用户上线时，遍历其followers进行通知

JavaScript中的设计模式

原型模式

可以想到javascript中的常见语言特性：原型链，原型模式指的其实就是复制一个已有的对象来创建新的对象，这在对象十分庞大的时候会有比较好的性能（相比起直接创建）。常用于js中对象的创建

原型模式创建上线订阅中的用户

首先，创建一个原型，可以看到这个原型相比起之前的来说没有定义构造器。

代理模式

可自定义控制队员对象的访问方式，并且允许在更新前后做一些额外处理，常用于监控、代理工具、前端框架等等。JS中有自带的代理对象：Proxy() ，在红宝书中代理那章也有详细阐述。

代理模式实现用户状态订阅

还是上述观察者模式的例子，可以使用代理模式对其进行优化，让他的online函数只做一件事：更改状态为上线。

迭代器模式

在不暴露数据类型的情况下访问集合中的数据，常用于数据结构中拥有多种数据类型（列表、树等），提供通用的操作接口。

用for of 迭代所有组件

用到了 Symbol.iterator 该迭代器可以被 for...of 循环使用。

定义一个list 队列，每次从队首取个节点出来，如果这个节点有孩子结点将其全部添加到队尾，每次调用next都返回一个结点~详见代码

前端框架中的设计模式（React、Vue…）

代理模式

与之前讲的Proxy不太一样

Vue组件实现计数器

上述代码，为什么count能随点击而变化？这就要说到前端框架中对DOM操作的代理了：

更改DOM属性 -> 视图更新

更改DOM属性 -> 更新虚拟DOM -Diff-> 视图更新

如下就是前端框架对DOM的一个代理，通过其提供的钩子可以在更新前后进行操作：

组合模式

可以多个对象组合使用，也可以单个对象独立使用，常应用于前端组件，最经典的就是React的组件结构：

React组件结构

还是计数器的例子~