//购物卷装饰者选件类
var voucher = function(economic){
economicsDecorator.call(this,economic);
};
extend(voucher,couponDecorator);
voucher.prototype=function(){
getPrice:function(){
return this.getPrice() - this.getVoucher();
},
getVoucher:function(){
//获取优惠卷总价具体实现
}
};
var myCoupon = new economic();
myCoupon = new coupon(myCoupon);
myCoupon = new voucher(myCoupon);
在这种场景下面getCoupon方法已经找不到了，这是因为voucher装饰myCoupon的时候，它的父类economicsDecorator不包含getCoupon方法，那自然是取不到的了，那该怎么办呢？
分析一下装饰者抽象类economicsDecorator，我们传递了一个myCoupon的引用作为参数，我们可以通过这个参数做一些小动作，获得新增加的方法。
复制代码 代码如下:
var economicsDecorator = function(economic){
this.economic = economic;
this.interface = Ieconomics;
for(var k in this.economic){
if(typeof this.economic[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.economic[methodName]();
};
})(key);
}
}
}
this.regImplement(economic,Ieconomics);
};
economicsDecorator.prototype={
getPrice:function(){
return this.economic.getPrice();
}
};
看上面的代码，我们对装饰者抽象类做了一些修改，这样做是为了确保在装饰者选件类中一旦定义新方法，可以在装饰者抽象类中动态的定义出来。这里只是提供一个使用装饰者模式的思路，具体的实现代码远比这个复杂，由于项目还在开发中，demo暂不提供，支付宝新版收银台发布后，会跟大家再做个详细的设计分享。
Javascript设计模式之桥接模式
桥接模式：将抽象和其实现分离开来，以便二者独立变化。其实很简单，只是在API和具体事件之间增加一个桥梁，从而降低API和使用他的类和对象之间的耦合。
事实上对大多数同学来说桥接模式并不陌生，下面的this.getName就是一种桥接方法，他是外访问的一个接口，他的内部实现是通过访问内部私有变量来实现的，这个方法起到了外部和内部沟通的桥梁作用。
复制代码 代码如下:
var ioldfish = function(){
var name = '老鱼'；
this.getName = function(){
alert(name);
}
}
桥接模式用的最多的还是在事件监听器回调函数。下面这个是获取用户信息的API接口函数：
复制代码 代码如下:
function getUserInfo(userid,callback){
asyncRequest('GET','userInfo?userid='+userid,function(resp){
callback(resp.responseText);
});
}
接下去我们要做的是把这个API和某个事件的触发建立一个桥梁关系
addEvent(element,'click',bridgeMethod);
function bridgeMethod(e){
getUserInfo(this.userid,function(){
//回调函数实现代码
});
}
这里在element对象click的时候触发函数并不是getIserInfo，而是新建了一个桥接方法bridgeMethod，通过这层桥接使得API接口函数和click事件相对独立，这样大大拓宽了API的适用范围。
Javascript设计模式之适配器模式
适配器模式：打个比方，你维护了一个系统，之前一直都是用prototype框架，但是现在打算新引入YUI框架，那如何让两个框架平稳过度呢
,举个例子，如何将prototype中的$方法转换为YUI中的get方法：
复制代码 代码如下:
function $(){};
function YAHOO.util.Dom.get=function(el){};
function prototypeToYuiAdapter(){
return YAHOO.util.Dom.get(arguments);
}
你要在prototype中使用yui的get方法，只需要做以下申明即可：
$ = prototypeToYuiAdapter;
这样的话，在prototype中就可以使用YUI中的get方法了。本人并不是很推崇这种模式，所以不多做阐述，事实上我觉得不到万不得以，我们根本不需要使用这种模式，作为一名负责任的设计者，我宁可做代码重构也不希望使用该模式，只能作为无奈之下的过渡型方案使用。
Javascript设计模式之门面模式，观察者模式
门面模式：这应该是所有脚本框架中都用到的，最基础的设计模式，随便找个框架中定义好的方法看看就行了，比如说YUI中的setStyle方法等等等等。在这里就不多阐述了。
观察者模式：该设计模式应用在javascript上似乎更为牵强，不甚理解，这里就不说了，以免误人子第，如有心得者不吝赐教。
一天时间都耗在这篇博文上了，好象还有很多想写的，看来要把心里想的东西写清楚还是不容易的，再整理整理再说吧，敬请期待！
您可能感兴趣的文章: