装饰者模式有点像单体模式,无非就是动态给一个对象添加一些属性或方法,扩展比较方便。
我不明白为什么会取这个名字,难道给对象添加功能也被看作是装饰吗?呵呵。
我们先来看一个单体例子
//这是一个简单的单体例子
var testObj = {
a:function(){},
b:function(){},
c:{
d:function(){alert("hello")},
e:function(){}
}
}
非常简单明了的单体,如果要往这个对象里面的子对象c添加方法,则这样写:
testObj.c.f = function(){this.d()}
怎样?是不是很简单?
总言之就是往一个对象上动态添加方法或属性。
大家再看看下面这个稍微复杂的例子:
//创建一个命名空间
var myText = {};
//核心基础类
myText.Decorators = {};
myText.Core = function(myString){
this.show = function(){
return myString;
}
}
//第一个装饰者,给字符串添加问号
myText.Decorators.addQuestionMark = function(myString){
this.show = function(){
return myString.show() + '?';
}
}
//第二个装饰者,给字符串添加斜体标签
myText.Decorators.makeItalic = function(myString){
this.show = function(){
return "<i>" + myString.show() + "</i>";
}
}
//第三个装饰者,大写字符串的第一个字母
myText.Decorators.upperCaseFirstChar = function(myString){
this.show = function(){
var str = myString.show();
var ucf = str.charAt(0).toUpperCase();
return ucf + str.substr(1,str.length - 1);
}
}
//实例化
var theString = new myText.Core("this is a sample test string");
//用装饰者的方法来装饰字符串
theString = new myText.Decorators.upperCaseFirstChar(theString);
theString = new myText.Decorators.addQuestionMark(theString);
theString = new myText.Decorators.makeItalic(theString);
theString.show();