Your SlideShare is downloading. ×
Javascript 设计模式
   拔赤 bachi@taobao.com
 http://www.uedagazine.com
         2010-09-17
Java编程思想   JavaScript设计模式
  (扫盲)          (进阶)
•   单体
•   桥接
•   工厂
•   装饰者
•   适配器
•   观察者
• 单体
•   桥接
•   工厂
•   装饰者
•   适配器
•   观察者
单体
/*单体*/
var Singleton = {

         attribute1:true,

         attribute2:10,

         method1:function(){},

         ...
• 单体
• 桥接
•   工厂
•   装饰者
•   适配器
•   观察者
桥接
/*桥接*/
Y.on('click',function(e){
     //e?
});

nodelist.each(function(node){
     //node?
});

Y.Box.alert('msg',funct...
• 单体
• 桥接
• 工厂
• 装饰者
• 适配器
• 观察者
工厂
/*生成各种选号玩法的实例*/

//时时彩组选和值
var ssc_zxhz = new C.AbacusFactory(key1);
//大乐透普通玩法
var dlt_n = new C.AbacusFactory(key2);
/...
• 单体
• 桥接
• 工厂
• 装饰者
• 适配器
• 观察者
装饰者

/*对实例进行包装*/

Var node = $(HTMLElement);




        装饰者:对实例进行包装
装饰者 续
//创建"时时彩组选和值"包装器
var sscDecorator = function(instance){
     //wrap instance
     return wrapped_instance;
};

//通过工...
•   单体
•   桥接
•   工厂
•   装饰者
• 适配器
• 观察者
适配器




      多种格式接口的转换器
适配器 续




   多种格式接口的转换器
•   单体
•   桥接
•   工厂
•   装饰者
•   适配器
• 观察者
观察者
//给a标签绑定一个监听

$('a').onclick = function(){
     alert(this);
};




           当…的时候,发生…
观察者 – 自定义事件
//给一个widget绑定一个监听

new Y.Calendar('id')
     .on('select',function(d){
          alert(Y.dump(d));
     });


...
More…


        抽象工厂,门面,原型
        组合,享元,代理
命令,中介,职责链,备忘录,策略,状态
Q&A
Upcoming SlideShare
Loading in...5
×

Js设计模式

2,537

Published on

结合实例简单介绍js中常用的一些设计模式

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,537
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Js设计模式"

  1. 1. Javascript 设计模式 拔赤 bachi@taobao.com http://www.uedagazine.com 2010-09-17
  2. 2. Java编程思想 JavaScript设计模式 (扫盲) (进阶)
  3. 3. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  4. 4. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  5. 5. 单体 /*单体*/ var Singleton = { attribute1:true, attribute2:10, method1:function(){}, method2:function(){} };
  6. 6. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  7. 7. 桥接 /*桥接*/ Y.on('click',function(e){ //e? }); nodelist.each(function(node){ //node? }); Y.Box.alert('msg',function(box){ //box? });
  8. 8. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  9. 9. 工厂 /*生成各种选号玩法的实例*/ //时时彩组选和值 var ssc_zxhz = new C.AbacusFactory(key1); //大乐透普通玩法 var dlt_n = new C.AbacusFactory(key2); //大乐透上传选球 var dlt_upload = new C.AbacusFactory(key3); //接下来需要对各种玩法进行各自的包装 (简单)工厂:通用构造,初级解耦
  10. 10. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  11. 11. 装饰者 /*对实例进行包装*/ Var node = $(HTMLElement); 装饰者:对实例进行包装
  12. 12. 装饰者 续 //创建"时时彩组选和值"包装器 var sscDecorator = function(instance){ //wrap instance return wrapped_instance; }; //通过工厂创建一个玩法实例 var ssc = new C.AbacusFactory('SSC'); //将这个实例进行重新包装 var ssc = sscDecorator(ssc); 彩票一个玩法的实现骨架
  13. 13. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  14. 14. 适配器 多种格式接口的转换器
  15. 15. 适配器 续 多种格式接口的转换器
  16. 16. • 单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
  17. 17. 观察者 //给a标签绑定一个监听 $('a').onclick = function(){ alert(this); }; 当…的时候,发生…
  18. 18. 观察者 – 自定义事件 //给一个widget绑定一个监听 new Y.Calendar('id') .on('select',function(d){ alert(Y.dump(d)); }); http://cubee.github.com/src/calend ar/demo/calendar.html
  19. 19. More… 抽象工厂,门面,原型 组合,享元,代理 命令,中介,职责链,备忘录,策略,状态
  20. 20. Q&A

×