JavaScript学习笔记(四十四) 装饰器

装饰器模式(Decorator)

在装饰器模式中，可以在运行时给一个对象动态的添加额外的功能。当和静态类打交道的时候(static classes)，这可能是一个挑战。但在JavaScript中，对象是可变的，所以给对象添加额外功能的的过程在JavaScript中本身就不是问题。

装饰器一个方便的功能就是期望行为(expected behavior)的定制和配置。你从你的简单对象开始，只有一些基础功能。然后你从一个可访问的包装器池中挑出那些你想用来增强你的简单对象的包装器并按一定顺序装饰，如果顺序是重要的。

用法(Usage)

让我们看一下这个模式的一个示例用法。假设你正在致力于一个卖东西的web程序。每笔新的销售(new sale)记录是一个sale对象。这个sale“知道”这个条目(item)的价格并可以通过调用sale.getPrice()方法返回。取决于这个情况，你可以开始用额外的功能装饰这个对象。想象一下这个场景，销售的顾客在加拿大魁北克省(加拿大魁北克省)。这种情况下，购买者需要支付联邦税(federal tax)和魁北克省税(provincial Québec tax)。遵循装饰器模式，你将会说你用一个联邦税装饰器和一个魁北克省税装饰器“装饰”这个对象。你也可以用一个价格格式化功能装饰这个对象。这个场景可能看起来像下面这样：

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('quebec'); // add provincial tax
sale = sale.decorate('money'); // format like money
sale.getPrice(); // "$112.88"

在其它场景中，购买者可能在一个没有省税的省，并且你也可能想用加币(Canadian dollars)格式化价格，那么你可以这样做：

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('cdn'); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

正如你看到的，这是一种在运行时灵活添加功能和调整对象的方法。让我们看一下如何实现这种模式。

实现(Implementation)

实现装饰器模式的一个方法是每个装饰器都是一个对象包含了应该被重写的方法。实际上每个装饰器都继承至前一个装饰器装饰之后的增强对象。每个被装饰的方法将调用在uber(继承的对象)上相同的方法且获取值并额外做一些处理。

最终的影响就是当你在第一个示例中调用sale.getPrice()，你正在调用money装饰器的方法(见图7-1)，因为每个被装饰的方法首先调用parent的方法，money的getPrice()首先调用

quebec的getPrice()方法，这个方法再轮流调用fedtax的getPrice()等。这条链一直到最初的没包装的Sale()构造方法实现的getPrice()方法。

这是从构造方法和原型开始的方法：

function Sale(price) {
    this.price = price || 100;
}
Sale.prototype.getPrice = function() {
    return this.price;
};

所有将被实现的装饰器对象将被作为构造方法属性的属性：

Sale.decorators = {};

让我们看一个装饰器的例子。它是一个实现了自定义的getPrice()方法的对象。记住这个方法首先从parent方法获得值然后修改那个值：

Sale.decorators.fedtax = {
    getPrice: function() {
        var price = this.uber.getPrice();
        price += price * 5 / 100;
        return price;
    }
};

类似的我们可以实现其它的装饰器，需要多少实现多少。它们可以作为核心Sale()的功能扩展，像插件一样实现(implemented like plugins)。它们甚至可以“存活”在额外的文件中，可以被第三方开发者开发和共享：

Sale.decorators.quebec = {
    getPrice: function() {
        var price = this.uber.getPrice();
        price += price * 7.5 / 100;
        return price;
    }
};
Sale.decorators.money = {
    getPrice: function() {
        return "$" + this.uber.getPrice().toFixed(2);
    }
};
Sale.decorators.cdn = { 
    getPrice: function() { 
        return "CDN$ " + this.uber.getPrice().toFixed(2); 
    }
};

最后让我们看一下“神奇(magic)”的decorate()方法，它将所有部分都连接在一起。

记住它将会像这样被调用：

sale = sale.decorate('fedtax');

这个"fedtax"字符串将相当于Sale.decorators.fedtax实现的对象。新的被装饰的对象newobj将会继承我们现有的对象(最初的对象，或在上一个装饰器添加之后的对象)，就是this对象。为了做到继承这部分，让我们使用前面提到过的临时构造函数模式。我们也设置newobj的uber属性，所以child可以访问到parent。然后从装饰器复制所有的其它属性到新的被装饰的对象newobj。最后newobj被返回，在我们的示例中，它将会成为新的被更新的sale对象：

Sale.prototype.decorate = function(decorator) {
    var F = function() {},
    overrides = this.constructor.decorators[decorator],
    i,
    newobj;
    F.prototype = this;
    newobj = new F();
    newobj.uber = F.prototype;
    for (i in overrides) {
        if (overrides.hasOwnProperty(i)) {
            newobj[i] = overrides[i];
        }
    }
    return newobj;
};