javascript设计模式十：装饰者模式
在js函数开发中，想要为现有函数添加与现有功能无关的新功能时，按普通思路肯定是在现有函数中添加新功能的代码。这并不能说错，但因为函数中的这两块代码其实并无关联，后期维护成本会明显增大，也会造成函数臃肿。
比较好的办法就是采用装饰器模式。在保持现有函数及其内部代码实现不变的前提下，将新功能函数分离开来，然后将其通过与现有函数包装起来一起执行。
先来看个比较原始的js版装饰器模式实现：
1var Plane = function(){}
2
3Plane.prototype.fire = function(){
4 console.log('发射普通子弹');
5}
6
7//增加两个装饰类，导弹类和原子弹类
8var MissileDecorator = function(plane){
9 this.plane = plane;
10}
11MissileDecorator.prototype.fire = function(){
12 this.plane.fire();
13 console.log('发射导弹');
14}
15
16var AtomDecorator = function(plane){
17 this.plane = plane;
18}
19AtomDecorator.prototype.fire = function(){
20 this.plane.fire();
21 console.log('发射原子弹');
22}
23
24var plane = new Plane();
25console.log(plane);
26plane = new MissileDecorator(plane);
27console.log(plane);
28plane = new AtomDecorator(plane);
29console.log(plane);
30
31plane.fire();
32
33/*
34发射普通子弹
35发射导弹
36发射原子弹
37*/升级版装饰器模式，通过为js的Function构造函数添加实例方法before和after来实现。
Function.prototype.before和Function.prototype.after接收一个函数作为参数，这个函数就是新添加的函数，它装载了新添加的功能代码。
接下来把当前的this保存起来，这个this指向原函数(Function是js中所有函数的构造器，所以js中的函数都是Function的实例，Function.prototype中的this就指向该实例函数)
然后返回一个'代理'函数，这个代理函数只是结构上像'代理'而已，并不承担代理的职责(比如控制对象的访问)。它的工作就是把请求分别转发给新添加的函数和原函数，且负责保证它们的执行顺序，让新添加的函数在原函数之前执行(前置装饰 Function.prototype.before; 后置装饰 Function.prototype.after)，从而实现动态装饰的效果。
1// AOP 装饰函数
2Function.prototype.before = function(beforefn){
3 var _self = this; //保存原函数的引用
4 return function(){ //返回包含了原函数和新函数的‘代理’函数
5 beforefn.apply(this, arguments); //先执行新函数，且保证this不会被劫持，新函数接受的参数也会原封不动的传入原函数，新函数在原函数之前执行
6 return _self.apply(this, arguments); //再执行原函数并返回原函数的执行结果，并保证this不被劫持
7 }
8}
9
10Function.prototype.after = function(afterfn){
11 var _self = this; //保存原函数的引用
12 return function(){ //返回包含了原函数和新函数的‘代理’函数
13 var ret = _self.apply(this, arguments); //先执行原函数并返回原函数的执行结果，并保证this不被劫持，原函数执行的结果会赋值给ret变量，交由'代理'函数最后return
14 afterfn.apply(this, arguments); //再执行新函数，且保证this不会被劫持，新函数接受的参数也会原封不动的传入原函数，新函数在原函数之前执行
15 return ret;
16 }
17}
18
19//定义原函数
20var print = function(){
21 console.log('打印原函数执行结果');
22}
23
24print = print.before(function(){
25 console.log('打印前置装饰函数的执行结果');
26})
27
28print = print.after(function(){
29 console.log('打印后置装饰函数的执行结果');
30})
31
32//执行装饰后的print函数，为原函数print函数添加的装饰器对用户来说看起来是透明的
33print();
34
35//打印结果
36/*
37打印前置装饰函数的执行结果
38打印原函数执行结果
39打印后置装饰函数的执行结果
40*/上例中的AOP装饰器是通过在Function.prototype上添加before和after方法实现的，但有时这种直接污染函数原型的方法并不好，可以做些变通，把原函数和新函数都作为参数传入before和after方法中
1var before = function(fn, beforefn){
2 return function(){
3 beforefn.apply(this, arguments)
4 return fn.apply(this, arguments)
5 }
6}
7
8var after = function(fn, agterfn){
9 return function(){
10 var ret = fn.apply(this, arguments)
11 agterfn.apply(this, arguments)
12 return ret;
13 }
14}
15
16var a = function(){
17 console.log('原函数执行结果');
18}
19
20a = before(a, function(){
21 console.log('前置装饰函数执行结果');
22})
23
24a = after(a, function(){
25 console.log('后置装饰函数执行结果');
26})
27
28a()
29/*
30前置装饰函数执行结果
31原函数执行结果
32后置装饰函数执行结果
33*/最后再来个装饰器模式的实例应用。
在实际开发中比较常见的需求是用户数据上报，一般会在项目开发差不多后，陆续有此类需求提出，但此时如果要在对应函数中添加数据上报功能代码时，就会改动原有函数，既麻烦又增加开发测试成本。此时最好的就是使用装饰器模式通过将上报函数装饰到原有函数上。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>装饰者模式应用数据上报</title>
8</head>
9<body>
10 <button type="button" id="btn">点击登录并上报数据</button>
11</body>
12<script>
13var showDialog = function(){
14 console.log('显示登录弹窗');
15}
16
17var log = function(){
18 console.log('计数上报');
19}
20
21var after = function(fn, afterFn){
22 return function(){
23 var ret = fn.apply(this, arguments)
24 afterFn.apply(this, arguments)
25 return ret;
26 }
27}
28
29showDialog = after(showDialog, log)
30
31document.getElementById('btn').onclick = showDialog;
32
33</script>
34</html>