转载

聊聊设计模式（4）：装饰模式

Decorator Pattern，中文名为装饰者模式，这个模式思想很简单，但是特别容易把代码搞复杂，它包含四个重要角色：

Component , 抽象构件
ConcreteComponent , 具体构件
Decorator , 抽象装饰类
ConcreteDecorator , 具体装饰类

聊聊设计模式（4）：装饰模式

这几个角色很容易把人搞懵，所以在使用这个模式之前要彻底理解它。ECMAScript 2017 中增加了修饰器，它从语法层面帮掩盖了 Decorator 装饰类和 Component 构件，极大程度方便了我们理解装饰器：

function activate(target){
 target.barkable = true;
 target.runnable = true;
}

@activate
class EDog{}

console.log(EDog.barkable, EDog.runnable); // true true

上面的代码很简单， activate 是一个开关装饰类，通过它激活了 EDog —— 不会跑、不会叫的电子狗，让它具备了 bark 和 run 能力。

场景复现

过年回来后业务压力不大，小苏让小喜抽空做一个代码发布平台，帮助团队迁移代码发布平台，之前的前端静态代码是通过 SVN 管理和发布的，现在需要迁移到 Git 上去，小苏说这是个重任。小喜暗自欣喜，这 TM 也太简单了。

使用开源的 gitlab 搭建了一个代码管理平台，然后在 gitlab 上添加了钩子，每次有代码推送时，向小喜的代码平台发送一个请求，小喜便直接执行 publish 操作：

class CodePlatform{
 publish(gitInfo) {
 this.scpCodeFromGitlabToOnline();
 }
 // 直接将 gitlab 代码直接复制到线上机器
 scpCodeFromGitlabToOnline() {
 // ...
 }
}

不久之后代码的构建从线下迁移到了线上，要求代码发布时先使用构建服务器处理，于是小喜给 CodePlatform 增加了一项功能：

class CodePlatform{
 publish() {
 this.transferCodeToBuilderServer(() => {
 this.scpCodeFromGitlabToOnline();
 });
 }
 scpCodeFromGitlabToOnline() {}
 // 将代码扔到构建服务器
 transferCodeToBuilderServer() {}
}

随着团队工程化程度越来越高，很多线下操作流程渐渐搬移到了线上进行云处理，后续又增加了测试服务器、日志服务器、安全监测服务器等，结果小喜的代码变成了这样：

class CodePlatform{
 publish() {
 // publish 的逻辑越来越重
 }
 scpCodeFromGitlabToOnline() {}
 transferCodeToBuilderServer() {}
 transferCodeToLogServer() {}
 transferCodeToSecureServer() {}
 transferCodeToTestServer() {}
}

小喜怎么也没想到，发布一个仓库在 CodePlatform 需要走这么多流程，这个类的职责越来越多，代码体积也越来越庞大，此时的小喜有点苦恼。

有一次，小喜学习 ES7 相关知识，突然看到一个叫做 Decorator 的东西，想了想似乎可以在项目中用一下。这不用不知道，一用吓一跳，原来之前的代码还可以这样架构：

// 为所有的服务添加日志服务
class LogService{}
const logger = new LogService();

@logger('build')
class BuildService{}

@logger('secure')
class SecureService{}

@logger('test')
class TestService{}

首先将服务抽离出来，然后：

const builder = new BuildService();
const securer = new SecureSevice();
const tester = new TestService();

@securer
@logger('CodePlatform')
class CodePlatform{
 @builder
 @tester
 publish() {}
}

让 CodePlatform 的代码先走一遍 securer ，在发布的时候走一遍 tester 和 builder ，代码结构瞬间变得清晰了很多。