其实生命就是这样，从无到有，从稚嫩到成熟。现状态转变自前一个状态，只是多了点东西，它们就变得相互独立，形同陌路。
装饰者模式，听名字就会明白，是在原有对象的基础上，给其装饰一些东西，使其成为一个新的对象。举个例子：我现在是一个单身狗，给我一个女朋友，我就变成了有女朋友的单身狗；换句话说就是，我现在是一个单身狗对象，给我装饰了一个女朋友，我就成为一个有女朋友的单身狗对象。接下来用代码阐述一下：
const SingleDog = function () {
}
SingleDog.prototype.say = function () {
console.log('我是一只单身狗');
}
const DecorateGfriend = function (men) {
this.men = men;
}
DecorateGfriend.prototype.say = function () {
this.men.say();
console.log('我有女朋友');
}
const me = new DecorateGfriend(new SingleDog());
me.say(); // 我是一只单身狗，我有女朋友
OK，我们先来看一下上面的代码，至关重要的DecorateGfriend做了二件事情：1. 调用了SingleDog的say函数；2. 额外打印出了一句话。这两点其实就是装饰者模式的精髓：在保持原有对象功能的基础上，增加新功能
上面的代码看起来不太好看，又多又乱而且DecorateGfriend似乎违反了开放-封闭原则，即我要是想秀波恩爱，额外打印出一句“我很幸福”之类云云，需要直接改DecorateGfriend的代码，这样子是不行的，所以有没有什么好的方法嘞？下面给出 2 个经典的AOP装饰函数：
Function.prototype.before = function(beforefn) {
const self = this;
return function () {
beforefn.apply(this, arguments);
return self.apply(this, arguments);
}
}
Function.prototype.after = function(afterfn) {
const self = this;
return function () {
const ret = self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
}
}
来看看第一个函数，正如上面提到的，做了两件事情：1. 先调用了传递进来的函数，2. 在调用了函数本身。第二个函数和上面相反。所以，我们可以用上面的函数来重构单身狗的例子：
Function.prototype.after = function(afterfn) {
const self = this;
return function () {
const ret = self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
}
}
const singleDogSay = function () {
console.log('我是一只单身狗');
}
const decorateGfriend = function () {
console.log('我装饰了一个女朋友');
}
const flaunt = function () {
console.log('秀死你们');
}
const me = singleDogSay.after(decorateGfriend).after(flaunt);
me(); // 我是一只单身狗 我装饰了一个女朋友 秀死你们
是不是很爽，想秀多少波都可以，只要一直after下去。
接下来，我们来思考一个问题，装饰者模式能给我们日常的开发中带来哪些好处呢？
可以把行为依照职责分成更细的粒度，随后将它们合并到一起，这有助于我们编写一个松耦合高复用的系统
下面是两个启发性例子：
1、
大家或许都接触过“埋点”，一种统计的方式。比如想获取有多少用户点击了这个活动的按钮，会在这个按钮点击时发送一条统计数据到服务器。
按照正常思维大家会写这样的代码：
const btn = document.getElementById('J_btn');
const doSomething = function() {
console.log('用户点击这个按钮后发生的事情');
}
const sendInfo = function() {
console.log('发送埋点信息');
}
btn.onClick = function() {
doSomething();
sendInfo();
}
上面这段代码违反了单一职责原则，这个按钮要做的事情仅仅是doSomething里面的，但是它不得不在onClick实践中又执行了发送埋点信息这一个操作。所以，我们需要将它， 分开，而装饰者模式正好为我们提供了完美的解决方案：
Function.prototype.after = function(afterfn) {
const self = this;
return function () {
const ret = self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
}
}
const btn = document.getElementById('J_btn');
let doSomething = function() {
console.log('用户点击这个按钮后发生的事情');
}
const sendInfo = function() {
console.log('发送埋点信息');
}
doSomething = doSomething.after(sendInfo);
btn.onClick = doSomething;
这样就很清晰了，按钮点击后只是执行doSomthing里面的内容，而埋点只不过是“附带”执行的操作，在代码可读性方面一目了然，而且两个函数各自的修改并不会对其他函数造成影响，完美符合单一职责原则。
2、
表单验证
大家应该都编写过表单验证的程序：在用户填写好一堆表单数据后，在上传至服务器前要对表单数据进行校验，比如，用户名密码是否为空之类。遇到这种情况，很直观的思路是写下面这样的代码实现：
const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');
submit.onClick = function() {
if (name === '') {
console.log('用户名不能为空');
return;
}
if (password === '') {
console.log('密码不能为空');
return;
}
里面校验的逻辑可以抽出来，所以变成这样：
const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');
const validate = function () {
if (name === '') {
console.log('用户名不能为空');
return false;
}
if (password === '') {
console.log('密码不能为空');
return false;
}
return ture;
}
submit.onClick = function() {
if (!validate()) return;
console.log('开始上传');
}
但是同样违反了单一职责原则，上传只做上传的事情就OK，不应该参杂校验的逻辑，我们可以用装饰者模式改写如下：
const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');
Function.prototype.before = function(beforefn) {
const self = this;
return function () {
if (!beforefn.apply(this, arguments)) {
return;
}
return self.apply(this, arguments);
}
}
const validate = function () {
if (name === '') {
console.log('用户名不能为空');
return false;
}
if (password === '') {
console.log('密码不能为空');
return false;
}
return ture;
}
let forSubmit = function () {
console.log('开始上传');
}
submit.onClick = forSubmit.before(validate);;
咋们稍稍改了一下before函数，使其前面执行的函数返回为false时不执行后面的函数。用装饰者模式重构一波后，是不是感觉很清爽。。。
最后打两个广告：
酷家乐内推欢迎找我，邮箱：[email protected]
单身妹子欢迎找我，微信：mz975066610^ _ ^