开发学院网页设计JavaScript Javascript乱弹设计模式系列(3) - 装饰者模式(De... 阅读

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

 2010-09-14 13:35:20 来源:WEB开发网   
核心提示: 4. 添加PersonOpr.js,创建操作类:var PersonOpr = {display : function(person) { //显示个人秀照片 $("#imgHead").attr("src","images/"

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) - 面向对象基础以及接口和继承类的实现

上一页  3 4 5 6 7 8 

Tags:Javascript 乱弹 设计模式

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接