共计 7416 个字符，预计需要花费 19 分钟才能阅读完成。
上一节次要学习了办法的可扩展性以及怎么更好的扩大办法，本节次要学习模块的可扩展性以及怎么更好的扩大模块。
咱们能够把任何一个程序看成是模块 + 组织模块沟通，模块是组成程序的一个单元，各种各样的模块加上它们的沟通就组成了咱们的程序，这个过程很像咱们生存中开一家餐馆，咱们须要厨师模块、服务员模块、点餐模块等等，这些模块它们之间相互沟通，点餐模块通知服务员模块，服务员模块再通知厨师模块，厨师模块做好了之后再通知服务员模块，这样沟通形式就组成了餐馆的工作形式，对于程序也是一样。
怎么做模块？
这里提供一个设计模块的思路，思路并不是固定的，如果须要，能够按本人的想法去设计一下，这个思路是在你还不相熟模块设计的时候提供一个指导思想。
- 首先咱们拿到需要
- 而后剖析实现需要须要哪些步骤，比方把一个大象放进冰箱须要哪些步骤
- 剖析实现这些步骤须要什么样的模块
- 实现模块
- 组织模块沟通
这个思维再借用开餐馆的例子来讲，需要是开餐馆，开餐馆须要有人服务客人、须要做菜、须要晓得客人点什么餐，要服务客人咱们就得有服务员模块，要做菜就得有厨师模块，要晓得客人点什么就须要点餐模块，而后咱们实现这些模块，再安顿这些模块之间怎么工作。
进步整体我的项目可扩展性的外围？
- 低耦合
- 良好的组织沟通形式
低耦合的模块是整个程序层面具备可扩展性的根底，只有当你的模块划分低耦合的时候你的我的项目才会具备十分良好的可扩展性。
模块划分好了还要组织它们之间的沟通，这是第二个方面，要良好的组织它们之间的沟通，一个好的我的项目代码就是划分低耦合的模块以及组织它们之间的沟通。
咱们平时所说的架构就是在设计如何把我的项目分成低耦合的模块，并组织沟通。
一、进步可扩展性的设计模式
1.1. 应答需要变更的设计模式（1）
1.1.1. 观察者模式
目标 ：缩小模块之间的耦合，来进步扩展性。比方有 a、b 两个模块，如果 a 模块间接跟 b 模块沟通，a => b 这两个模块的耦合性比拟高，相当于我跟你面对面交换，要离开的时候招呼都不打，很不礼貌，退出观察者模式之后，a => 观察者 => b，a 模块通过观察者把音讯给到 b 模块，相当于我跟你之间用微信在交换，微信就是观察者，这个时候咱们要离开的话能够不回对方音讯，这样就升高了耦合度。
利用场景 ：当两个模块间接沟通会减少它们的耦合度，不不便间接沟通时能够应用观察者模式。
典型的不不便间接沟通的场景是异步，比方我有一个申请发给后端了，那么怎么确保它能跟同步模块沟通到呢？再比方绑定了一个点击事件，怎么晓得什么时候触发了点击事件呢？就像你不晓得异步申请后果什么时候能回来一样，你也不晓得什么时候会触发点击事件。如果这个时候 a 模块是异步，b 模块是同步，同步模块 b 要跟 a 模块沟通必定不太不便，套回调就会减少它们之间的耦合度，所以通过观察者模式就很适合，b 模块先在观察者身上注册一个察看办法，到时候 a 模块异步工作实现了就告诉观察者，再由观察者把消息传递给 b 模块，这样就解决了它们不不便间接沟通的问题。
还有一种场景是，比方有两个齐全没想过要沟通的模块，你在写代码的时候齐全没有想过有一天这两个模块要产生交换，随着产品倒退它们之间要进行交换了，如果强行改它们的代码让它们交换先不说减少了多少工作量和复杂度，减少耦合度是不可避免的。通过观察者模式来做对两边的变动就会比拟少，因为一开始没想过要沟通，也就意味着没有给彼此留沟通接口，忽然产品说要沟通的话你就要为彼此再新增一个沟通接口，这样改变老本是比拟大的，通过观察者模式就能够把改变老本升高。
1.1.2. 职责链模式
职责链模式与观察者模式绝对，它更多的是用于组织一系列的同步模块。
目标 ：为了防止申请发送者与多个申请解决者耦合在一起，把模块组织成一个链条。比方开一个水果加工厂，咱们把水果加工的环节组织成一个链条，先通过荡涤模块，荡涤完当前再把水果交给切水果模块，切水果模块解决完之后交给加工水果模块，像一条流水线一样把咱们要做的事件一个一个的组织上来，而后在这个链条下面顺次的实现工作、传递音讯。
利用场景 ：把操作宰割成一系列的模块，每个模块只解决本人的事件。
这样组织的益处在于把你的操作宰割成一系列的模块，每个模块只解决本人的事件，这时候你要退出新货色只须要新增一个环节，改起来比拟难受。
用下面的水果加工厂举例，咱们现有的流程是 荡涤 => 切水果 => 加工水果，若忽然审查严格了，水果荡涤好之后要退出一个消毒的环节，如果咱们的流程是一条职责链的话，只须要在链条中退出一个消毒就能够了，这样流程就是 荡涤 => 消毒 => 切水果 => 加工水果，退出一个环节对前后的解决模块都没有影响。
如果没有组织成职责链，模块就会很凌乱，每个模块既负责切水果又负责洗水果，这时候如果要退出消毒性能，就要对水果加工厂的每一个模块退出消毒的程序，工厂量就变得很大。
1.2. 应答需要变更的设计模式（2）
1.2.1. 访问者模式
目标 ：解耦数据结构与数据的操作。比方我有一系列的数据，以前是间接操作这个数据，数据 => 操作，退出访问者模式之后，数据 => 访问者 <= 操作，数据给到访问者，操作也给到访问者，而后在访问者外面通过给入的操作来操作数据。
利用场景 ：不心愿数据结构与操作有关联的时候能够应用访问者模式。
什么是数据结构不心愿与操作有关联？
假如有 10 组数据结构齐全不同的数据和 10 种齐全不同的操作，数据是多变的，数据结构是不稳固的，操作也是不稳固的，这种状况下咱们不好定义该怎么操作，所以咱们能够通过访问者，把数据和操作都给访问者，心愿哪种操作和操作什么数据的时候都可能把具体的命令传给访问者。
访问者模式很少用，因为咱们在写程序的时候对于数据咱们往往谋求构造稳固，如果程序外面的数据结构不稳固也就意味着这个程序在设计上就是有问题的，所以说访问者模式很少用，因为在开发我的项目的时候基本上都是间接操作数据，失常的代码外面不会呈现这种数据结构不稳固的状况。
二、根本构造
2.1. 观察者模式的根本构造
观察者模式的外围在于定义一个观察者，这个观察者并不会说具体的绑定在某一个模块与某一个模块，它是一个全局通用的货色，你到时候有哪个模块须要注册察看就来这里注册，哪个模块要触发察看就来这里触发。个别实用于不不便间接沟通或者异步操作。
观察者根本的两个因素是 regist 和 fire，有这两个因素就满足了观察者的根本构造，如果你想也能够退出 remove 等等操作，regist 就相当于把你的监听注册到 observe 的 message 对象上，fire 相当于你要触发哪个监听，间接调用一下。
2.2. 职责链模式的根本构造
职责链模式是把咱们要做的事件组织成一系列的模块，而后顺次的调用这些模块去传递音讯。实用于不波及到简单异步的操作。
假如把咱们要做的事件组织成 mode1、mode2、mode3，这三个模块顺次的解决_result，这就是职责链模式的构造。
2.3. 访问者模式的根本构造
访问者模式是定义一个访问者来接收数据和操作。实用于数据和操作不稳固的状况。
data 变量是咱们的数据，handler 是咱们的操作，vistor 是咱们的访问者，把数据和操作给到访问者，在访问者外面让操作去拜访数据。通过访问者来代替操作间接拜访对象，来缩小数据和操作之间的耦合。
三、利用示例
3.1. 观察者模式的示例
3.1.1. 多人合作的问题
需要：假如 A 工程师写了首页模块，B 工程师写了评论模块，当初要把评论展现在首页。
假如 A 工程师写的模块叫 index，B 工程师写的模块叫 comment，这两个模块在设计的时候齐全没有想过前面要产生关联，忽然产品说想把热门评论展现在首页上，此时响起了突然之间昏天黑地的 BGM，这个时候就会有点麻烦，评论模块基本没有留出一个接口让首页去调用拿到评论的数据，首页也没有写一段代码来调用评论模块的办法获取数据，如果强行沟通就要把两个模块的负责人叫过去坐下聊聊怎么定义接口怎么调用。
通过观察者模式就能轻松的扩大性能，代码示例：
首先定义观察者，而后定义它的两个基本要素，一个是触发（fire），还有一个注册（regist），注册函数会接管两个参数，第一个是要注册的监听叫什么名字，第二个参数是这个监听的操作方法，函数外部注册一下这个监听；触发函数接管咱们要触发的这个监听叫什么名字，而后调用一下。
有了这个观察者之后，A、B 两个工程师不须要坐在一起沟通了，首页模块只须要触发一下须要的监听，评论模块只须要注册一下监听就好了，不须要再为彼此新增一个接口。代码示例：
代码仅做示例，应用观察者时须要 new 这个类。通过观察者模式去做，两个模块的沟通老本和耦合度就会变得比拟低。
3.1.2. 转盘利用
需要：有一个转盘利用，每转一圈速度减慢。
咱们先剖析步骤：
- 初始化转盘 HTML
- 选定好奖品（抽奖其实在点下抽奖的时候就曾经选定好后果了，动画只是为了难看，程序执行不须要那么久）
- 让转盘转动 => 减慢 => 转动（循环直到停下）
而后剖析模块：
- 初始化模块（初始化 HTML）
- 后果选定模块（选定抽奖后果）
- 动画成果模块（动画）
- 转动管制模块（管制转盘转动和进行）
组织沟通：
初始化模块工作完之后，抽奖按钮点击时选定抽奖后果，而后转动管制模块告诉动画模块开始转动，动画实现后通知转动管制模块实现了，转动管制模块再告诉动画模块下一圈转多快，怎么转，动画模块和转动模块是个循环的过程。
动画模块和转动模块的沟通存在一个问题，动画个别会用 setInterval 来做，它是异步的，异步模块不能间接跟同步模块沟通，转动管制模块是同步的，它不晓得动画模块什么时候能力转完一圈，这就是典型的不不便间接沟通的场景，所以这两个模块之间的沟通能够应用观察者模式。
代码示例：
先把观察者代码拿过去
而后依照剖析步骤，先写好各个模块
咱们先来规定音讯的构造，moveControll 模块通知 mover 模块要怎么转，也就是 moveControll 会调用 mover 模块并给它一个配置，这个配置就是转动的命令，咱们约定一下配置的格局为一个对象，speed 属性示意转动的速度（比方 speed 是 50，示意每 50 毫秒转动一格奖品），time 属性示意本次转动几格奖品（比方 time 是 10，示意这一次转动就转 10 格奖品）
模块架子搭好当前再来独立实现每个模块。
先实现初始化模块，示例不写具体代码了，咱们先定义一个 dom 数组，整个初始化模块要做的事件就是创立 10 个奖品 DOM 全都 push 进数组外面，最终这些 DOM 都放在页面中展现进去。
后果选定模块个别是申请后端接口问它抽中哪个奖品，这里简略用一个随机数代替，例如咱们随机一个 0 -10 的随机数，随机数加 40 让它有四圈的根底圈，多转几圈意思意思，而后咱们把后果取整并 return 进来。
动画成果模块的实现首先咱们要定义好转动动画，默认第一个奖品是选中的，转动的时候把选中成果加到第二个奖品上并移除第一个奖品的选中成果，顺次循环。
所以咱们定义一个初始下标变量，默认值为 0，示意以后在第一个奖品，而后创立一个定时器，执行距离就取 config 中的 speed，定时器中判断以后奖品如果是第一个，就移除最初一个的选中成果，其它的依照程序即可。
看到这段 if-else 代码里反复的局部咱们是不是能够想到后面学到的一种设计模式来优化一下呢？
采纳享元模式来优化代码，先提取不同的局部作为公共享元，这里不同的局部是它们要移除的内容不同。咱们先在定时器里面创立一个变量 removeNum，默认为最初一个，也就是下标为 9 的那一项，而后判断一下以后奖品是不是第一个，如果不是第一个就把 removeNum 赋值为 nowIn 减 1，而后设置选中款式即可，这样就能缩小反复代码。
以上代码实现了动画成果模块的次要性能，咱们还须要一个转动实现进行的判断，判断如果 nowIn 等于传进来的 config 中要求转动的总次数（time）了就革除定时器进行转动。比方 config.time 等于 10，当 nowIn 等于 10 的时候就示意转完了。转完当前还须要告诉转动管制模块曾经转完了，所以革除定时器当前还须要通过观察者触发一个事件来告诉转动管制模块。
这里如果不采纳观察者模式，异步模块跟同步模块沟通就会比拟艰难，通过观察者这里沟通起来就会比拟难受，代码构造也很清晰。
代码勘误：以上动画成果模块的代码示例在定时器中设置选中成果后要给 nowIn++，截图的时候遗记改过了。
而后咱们补充转动管制模块的代码：
- 首先拿到抽奖后果赋值给 final 变量；
- 转动的总圈数赋值给_circle 变量；
- 而后创立变量_runCicle 记录曾经跑了几圈了，默认值为 0；
- 创立 stopNum 变量，示意最初要停在哪个奖品，抽奖后果对 10 取余失去最终停在哪个奖品；
- 定义初始速度变量_speed，默认值为 50；
- 调用 mover 函数让它第一次转动起来，传入转动圈数和初始速度；
- 而后在观察者下面注册一个 finish 的监听，用来监听动画成果模块实现；
- 在监听的回调中去操作告诉动画模块下一圈怎么转，首先创立_time 变量，初始值为 0；
- 转完一圈速度要减慢，所以_speed += 50 让速度变慢；
- 曾经跑过的圈数要加加，所以让_runCircle++；
- 而后判断跑过的圈数_runCircle 是不是小于根底圈_circle，如果是就阐明动画模块还是要转 10 格，如果跑完了，就让_time 停在最终的奖品那。
这样咱们就能很好的将动画成果模块和转动管制模块的沟通组织起来，异步模块 mover 不晓得什么时候能实现，间接沟通是很不不便的，通过观察者来解决就很轻松。
3.2. 职责链模式的示例
3.2.1. axios 的拦截器
需要：设计一个 axios 拦截器
axios 的拦截器非常简单，就是利用职责链模式来实现的。代码示例：
先创立 axios 类，类外面会有一个 interceptors 属性，这个属性中有申请拦挡对象 request 和响应拦挡对象 response，这两个对象别离都是 interceptorManner 类的实例化
而后咱们创立 interceptorManner 类，它有一个 use 办法，调用这个办法就是用来增加拦挡的，use 办法接管两个参数，一个拦挡胜利回调和一个拦挡失败回调
咱们要把调用 use 办法退出的拦挡胜利回调以及拦挡失败回调都存入 interceptorManner 类的 handler 属性外面，这个属性是一个数组。
整个拦截器执行的过程就是一直的把你的拦挡操作退出到数组外面来造成一条职责链，因为拦挡的数量是不确定的，你能够增加一个拦挡或者多个拦挡，所以通过职责链模式来组织代码扩大起来就会比拟轻松。
咱们发申请的时候会调用 request 办法，所以咱们给 axios 类的 prototype 上增加 request 办法，request 办法须要把申请拦截器的链条、初始链条、响应拦截器的链条拼接在一起，而后顺次执行这个链条上的每一个办法，并且让咱们的配置在这个链条上进行传递。
所以咱们定义一个 chain 变量来存初始链条，而后别离遍历申请拦挡链条和响应拦挡链条，将这两个链条别离放在 chain 的结尾和结尾。
而后顺次执行链条，因为链条中可能有同步和异步操作，所以咱们能够借助 promise 来实现。
promise.then 执行完会返回新的 Promise 对象，在循环中把每次返回的 Promise 对象再赋值给 promise 变量就能实现主动调用，这样整个链条就主动执行起来了，而后咱们把最终的后果 return 进来。
整个 axios 的源码实现就是一个典型的拦截器操作，通过职责链模式来实现代码是不是十分清晰呢？
3.2.2. 利用职责链模式组织一个表单验证
需要：有一个表单，须要先前端校验，再后端校验
假如咱们要验证一个 input，首先咱们要绑定 input 失去焦点的事件，而后拿到要验证的值，在没有想过用职责链模式来做的状况下咱们可能会写两个办法，而后顺次调用来进行验证，例如：
这样扩大新性能就会比拟麻烦，咱们换成职责链模式来实现，代码示例：
首先将前端验证和后端验证用数组来组织成一个链条，而后咱们要顺次执行链条中的办法，promise 的形式下面曾经实现过了，咱们换成 async 的形式来实现
async 函数中拿到要验证的值，而后循环链条通过 await 来调用链条中的办法，最终把后果 return 进来
如果这时候需要改了，须要再增加一个中台验证，咱们只须要在职责链数组对应的地位增加一个办法就好了。
就像咱们后面学到的水果加工厂的例子，如果要退出一个消毒环节，咱们只须要加一个消毒的模块。职责链的益处在于它把咱们要做的事件组织成一系列的模块，扩大起来就会不便很多。
下面代码你甚至能够把验证操作封装成一个类，而后留出一个接口，他人能够通过这个接口来增加验证操作，这样代码的扩展性就会变得更高。代码示例：
这样组织代码之后，如果要退出新操作，只须要调用 add 办法把你要退出的操作放进去就能够了。
3.3. 访问者模式的示例
3.3.1. 不同角色拜访数据
需要：公司有很多的财务报表，财务关怀收入和支出，老板关怀盈利。
一个公司的财务报表有很多，财务报表的访问者也有很多，比方有财务有老板等等，可能财务有多个，老板也有多个（合资经营），他们都想看到本人想看到的内容，这样的状况下无论是数据还是访问者都是不稳固的，访问者模式很适宜解决这样的状况。
代码示例：
首先定义财务报表类，这个类外面有支出、收入、利润属性
而后定义老板类，给老板类增加一个 get 办法用来获取老板须要的数据，老板关怀利润，所以接管一个参数
定义财务类，给财务类增加一个 get 办法用来获取财务须要的数据，财务关怀支出和收入，所以接管两个参数
而后咱们定义访问者，访问者接管到时候要拜访哪张财务报表和是谁在拜访这两个参数
因为老板和财务须要的数据是不同的，将来可能还会有多个角色退出，所以咱们创立一个策略工厂，把对应的角色须要的数据返回进来。
咱们还要晓得传进来的这个人是老板还是财务，能够通过 construcotr 属性来获取调用的构造函数叫什么名字，而后调用对应的角色办法即可
在应用的时候，如果咱们有三个财务报表、两个老板、一个财务，老板 1 想看财务报表 2，老板 2 想看财务报表 1，间接调用访问者把对应的报表和老板传进去就能够了。
这样的代码组织下咱们能够随时更换访问者以及要拜访的财务报表，实现了数据和操作之间的解耦。
下一篇：设计模式—对于如何进步代码品质（远离脏乱差，人人见了都要夸）
本文由博客一文多发平台 OpenWrite 公布！
