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

4. 添加PersonOpr.js，创建操作类：

var PersonOpr = {
　　display : function(person) { //显示个人秀照片
　　　　 $("#imgHead").attr("src","images/" + person.head + ".gif");
　　　　$("#imgBody").attr("src","images/" + person.body + ".gif");
　　　　$("#imgFoot").attr("src","images/" + person.foot + ".gif");
　　　　$("#divBg").css("background-image", "url(images/" + person.background + ".gif)");
　　},
　　init : function() {
　　　　//初始化皮肤列表
　　　　//...
　　}
}

至此，装饰者模式的思路已经应用在该个人服装秀中了。

这里实现链接实例：

装饰者模式Demo

源代码就不提供下载了，无非就是html，js，css文件，从链接实例中可以查看源代码；

总结

该篇文章用Javascript设计装饰者模式的思路，重点从原理中分析，最后实现一个类似于QQ秀的应用网站。

本篇到此为止，谢谢大家阅读！

相关系列文章：

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

Javascript乱弹设计模式系列(2) － 抽象工厂以及工厂方法模式(Factory)

Javascript乱弹设计模式系列(1) － 观察者模式(Observer)

Javascript乱弹设计模式系列(0) － 面向对象基础以及接口和继承类的实现