一、装饰者模式是什么
给对象动态地增加职责的方式称为装饰者(decorator)模式。该模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。相比于继承，装饰者是一种更轻便灵活的做法，这是一种“即用即付”的方式。
出自《JavaScript设计模式与开发实践》的官方定义。
我们可以简单理解成：装饰者模式是，在不改变原对象的基础上，通过对其进行包装拓展，灵活组装搭配，使原有对象可以满足用户的多样复杂需求。
二、为什么需要使用装饰者模式
我们在平时业务开发中，经常遇到产品经理改需求，加附加功能。如果把所有功能的逻辑实现堆砌到一个函数中，每次小的需求改动，就需要全局修改逻辑。如此一来”牵一发而动全身”肯定是不好的。因此，我们可以把主功能的代码写到主函数，附加功能的独立成单独的函数，产品改动附加功能需求，我们只需改动附加单一函数。这一实现思路便是装饰者模式，这样不仅降低了维护成本，还提高了效率。
三、实践应用加深理解装饰者模式
3.1 JavaScript使用装饰者模式
我们使用装饰者模式，来实现点击按钮弹出“您还未登录哦”的弹窗，并将按钮文案改为“快去登录”，同时将按钮置灰的功能。具体代码如下： html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮点击需求</title>
</head>
<style>
#modal {
height: 200px;
width: 200px;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
text-align: center;
}
</style>
<body>
<button id='open'>点击打开</button>
</body>
JavaScript逻辑实现：
// 弹框创建逻辑
const Modal = (function() {
let modal = null
return function() {
if(!modal) {
modal = document.createElement('div')
modal.innerHTML = '您还未登录哦~'
modal.id = 'modal'
modal.style.display = 'none'
document.body.appendChild(modal)
}
return modal
}
})()
// 将展示Modal的逻辑单独封装
function openModal() {
const modal = new Modal()
modal.style.display = 'block'
}
// 按钮文案修改逻辑
function changeButtonText() {
const btn = document.getElementById('open')
btn.innerText = '快去登录'
}
// 按钮置灰逻辑
function disableButton() {
const btn = document.getElementById('open')
btn.setAttribute("disabled", true)
}
// 功能逻辑整合
function changeButtonStatus() {
changeButtonText()
disableButton()
}
document.getElementById('open').addEventListener('click', function() {
openModal()
changeButtonStatus()
})
上述代码实现，将功能函数拆分，遵循了“单一职责”的原则，增强了代码的可拓展性和可维护性。
3.2 ES7的装饰器
ES7使用 @ 语法糖能轻松给一个类装上装饰器，组装功能更加灵活方便。使用代码如下：
// 装饰器函数，它的第一个参数是目标类
function classDecorator(target) {
target.hasDecorator = true
return target
}
// 将装饰器“安装”到Button类上
@classDecorator
class Button {
// Button类的相关逻辑
}
// 验证装饰器是否生效
console.log('Button 是否被装饰了：', Button.hasDecorator)
// output：Button 是否被装饰了：true
由上述代码执行结果来看，Button 被 classDecorator函数装饰了，classDecorator的 target 指向了Button。
四、总结
装饰者模式在编码开发中常用的，它的核心思想是“只添加，不修改”。这一设计模式深受开发者喜爱，只用关注自己拓展的新功能模块，旧的逻辑基本保持不变。如此一来，开发者便少背锅啦~
本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情
