浅析JavaScript设计模式——装饰者模式

【本文源址:http://blog.csdn.net/q1056843325/article/details/54974156 转载请添加该地址】

装饰者模式
在不改变对象自身的基础上,在程序运行期间给对象动态地添加一些额外职责

在传统面向对象语言中,为对象添加功能常使用继承
但是继承有很多缺点:

  • 超类子类强耦合,超类改变导致子类改变
  • 超类内部细节对子类可见,破坏了封装性
  • 完成功能复用同时,可能会创造大量子类

前两点都很好理解
关于最后一点
比如说我们为五种不同类型的房子定义了五个类
但是我们还需要为每个房子添加门、窗户、喷漆
如果使用继承,那我们需要添加的子类个数就是:5×3 =15
这就非常的麻烦
但是如果我们可以动态的将门、窗户、喷漆添加到各房子对象
那么我们只需要这三个类

这样动态向对象添加职责的方式就是装饰者模式
就好比天冷了,我们穿上一层层衣服

浅析JavaScript设计模式——装饰者模式_第1张图片

简单实现

对于我们动态的解释语言JavaScript,要实现起来很容易
我们一步一步来实现

首先装饰者模式不是动态添加职责么

var person = {
    name: 'payen',
    sex: 'male'
}
person.age = '20';

当然没有这么简单
最上面我就说了
装饰者模式是在不改变对象自身的基础上
而我们改变了原对象
那我们再做进一步改变


现在我们假设正在开发一个小游戏:雷霆战机
最开始我们使用最渣的飞机,随着击落飞机吃道具
火力越来越NB
吃一颗星,不仅可以发普通子弹,还会发射散弹
再吃一颗,不仅可以发射普通子弹和散弹,还有跟踪导弹

var plane = {
    fire: function(){
        console.log('发射子弹');
    }
}
plane.fire();
//发射子弹
var fire1 = plane.fire;
var shot = function(){
    console.log('发射散弹');
}
plane.fire = function(){
    fire1();
    shot();
}
plane.fire();
//发射子弹 发射散弹
var fire2 = plane.fire;
var track = function(){
    console.log('发射跟踪导弹');
}
plane.fire = function(){
    fire2();
    track();
}
plane.fire();
//发射子弹 发射散弹 发射跟踪导弹

这样给对象动态的增加职责的方式就没有改变对象自身
一个对象放入另一个对象
形成了一条装饰链(一个聚合对象)
而上面的shot和track也就是是装饰者、装饰函数
当函数执行时,会把请求转给链中的下一个对象

浅析JavaScript设计模式——装饰者模式_第2张图片

函数功能扩展

在JavaScript中,很容易给对象扩展属性与方法
但是却不容易给函数扩展额外功能,除非改函数源码
但是改写函数违反了开放-封闭原则

var foo = function(){
    console.log(1);
}
//改为
var foo = function(){
    console.log(1);
    console.log(2);//增
}

一个常用的方法就是缓存函数引用,改写函数

var foo = function(){
    console.log(1);
}
//改为
var foo = function(){
    console.log(1);
}
var _foo = foo;
foo = function(){
    _foo();
    console.log(2);
}

但是这样写还是存在问题

  • 要维护额外的中间变量(_foo),如果装饰链过长,中间变量就会越来越多
  • 可能会存在this被劫持问题

关于this劫持问题,看下面的例子

var getId = document.getElementById;
document.getElementById = function(ID){
    console.log(1);
    return getId(ID);
}
document.getElementById('demo');

这样浏览器会报错

为什么呢?
因为使用 document.getElementById 的时候
内部有this引用,而这个this期望指向的是document
但是 getId 在获取了 document.getElementById 引用后
this就指向了window,导致抛出错误

为了让this正确指向document
我们可以做出修改

var getId = document.getElementById;
document.getElementById = function(ID){
    console.log(1);
    return getId.call(document, ID);
}
document.getElementById('demo');

但是这样还是很麻烦
下面我们通过AOP来为装饰者模式实现一个完美的解决方案

AOP装饰函数

先来给大家科普一下什么是AOP

AOP(Aspect Oriented Programming)面向切面编程
把一些与核心业务逻辑无关的功能抽离出来
再通过“动态织入”方式掺入业务逻辑模块

与业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等等
好处也很明显,保证了核心业务模块的纯净与高内聚性
而且其他的功能模块也可以很好的复用


首先我们要实现两个函数
一个用来前置装饰,一个用来后置装饰

Function.prototype.before = function(beforeFunc){
    var that = this;
    return function(){
        beforeFunc.apply(this, arguments);
        return that.apply(this, arguments);
    }
}
Function.prototype.after = function(afterFunc){
    var that = this;
    return function(){
        var ret = that.apply(this, arguments);
        afterFunc.apply(this, arguments);
        return ret;
    }
}

以前置装饰为例
调用before时,先把原函数的引用保存下来
然后返回一个“代理”函数
这样在原函数调用前,先执行扩展功能的函数
而且他们共用同一个参数列表
后置装饰与前置装饰基本类似,只是执行顺序不同

如果不喜欢这种污染原型的方式,也可以这么写

var before = function(originFunc, beforeFunc){
    return function(){
        before.apply(this, arguments);
        return originFunc.apply(this, arguments);
    }
}
var after = function(originFunc, afterFunc){
    return function(){
        var ret = originFunc.apply(this, arguments);
        afterFunc.apply(this, arguments);
        return ret;
    }
}

使用这种AOP的方式可以完美的对函数进行功能扩展

var foobar = function(x, y, z){
    console.log(x, y, z);
}
var foo = function(x, y, z){
    console.log(x/10, y/10, z/10);
}
var bar = function(x, y, z){
    console.log(x*10, y*10, z*10);
}
foobar = foobar.before(foo).after(bar);
foobar(1, 2, 3);
//0.1 0.2 0.3
//1 2 3
//10 20 30

由于原函数和装饰函数共用一个参数列表
所以我们可以用AOP改变函数参数

var data = {
    width: '100px',
    height: '100px'
}
var demo = function(data){
    console.log(JSON.stringify(data));
}
demo = demo.before(function(data){
    data.color = 'red';
});
demo(data);
//{"width":"100px","height":"100px","color":"red"}

最后

最后谈一谈装饰者模式的缺点
它也不是十全十美的

  • 装饰链叠加了函数作用域,如果过长也会产生性能问题
  • 如果原函数上保存了属性,返回新函数后属性会丢失
var demo = function(){
    console.log(1);
}
demo.a = 123;
demo = demo.after(function(){
    console.log(2);
});
demo();
console.log(demo.a);
//undefined

装饰者模式在开发中非常有用,在框架开发中也十分有用

==主页传送门==

你可能感兴趣的:(Web前端,JS设计模式)