Javascript乱弹设计模式系列(3) － 装饰者模式(Decorator)

核心提示： 这样，如果在装饰类中定义了新方法，Javascript乱弹设计模式系列(3) － 装饰者模式(Decorator)(6)，它的抽象类就会把该新方法动态定义出来，这样保证方法调用上的正确；然后再执行刚才的代码：var manifdder = new Manifdder();manifdder

这样，如果在装饰类中定义了新方法，它的抽象类就会把该新方法动态定义出来，这样保证方法调用上的正确；

然后再执行刚才的代码：

var manifdder = new Manifdder();
manifdder = new PrintDecorator(manifdder);
manifdder = new MakeInChinaDecorator(manifdder);
alert(manifdder.print()); //得到“Print!”

成功调用了！

其他扫描，传真功能，和打印功能类似，创建ScanDecorator和FaxDecorator，这里不在多说了。

实例分析

今天要介绍的场景是个 个人服装秀（类似于QQ秀）的网页范例，可以更换头像，上衣，腰裤，背景等。

效果图先让大家瞧瞧：

这里介绍几个核心代码：

1. 添加IPerson.js的IPerson接口类：

var IPerson = new Interface("IPerson", [["getData"]]);

2. 添加PersonDecorator.js的装饰者抽象类：

PersonDecorator.js
function PersonDecorator(person) {
　　this.person = person;
　　this.interface = IPerson;
　　for(var key in this.person)
　　{
　　　　if(typeof this.person[key] !== "function") //判断是否为方法类
　　　　　　continue;
　　　　var i;
　　　　for(i = 0, len = this.interface.methods.length; i < len; i++) {
　　　　　　if(key == this.interface.methods[i][0]) { //通过遍历比较在接口类中是否包含此方法，如果包含返回下一个
　　　　　　　　break;
　　　　　　}
　　　　}
　　　　if(i < this.interface.methods.length)
　　　　　　continue;
　　　　var decorator = this;
　　　　//采用匿名函数调用方式来定义新方法
　　　　(function(methodName) {
　　　　　　decorator[methodName] = function() {
　　　　　　　　return decorator.person[methodName]();
　　　　　　};
　　　　})(key);
　　}
　　Interface.registerImplements(this, IPerson);
}
PersonDecorator.prototype = {
　　getData : function() {
　　　　throw new Error("抽象方法，不能调用!");
　　}
}