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

         attribute1:true,

         attribute2:10,

         method1:function(){},

         method2:function(){}

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

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

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

//时时彩组选和值
var ssc_zxhz = new C.AbacusFactory(key1);
//大乐透普通玩法
var dlt_n = new C.AbacusFactory(key2);
//大乐透上传选球
var dlt_upload = new C.AbacusFactory(key3);

//接下来需要对各种玩法进行各自的包装

  (简单)工厂:通用构造,初级解耦
• 单体
• 桥接
• 工厂
• 装饰者
• 适配器
• 观察者
装饰者

/*对实例进行包装*/

Var node = $(HTMLElement);




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

//通过工厂创建一个玩法实例
var ssc = new C.AbacusFactory('SSC');

//将这个实例进行重新包装
var ssc = sscDecorator(ssc);

        彩票一个玩法的实现骨架
•   单体
•   桥接
•   工厂
•   装饰者
• 适配器
• 观察者
适配器




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




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

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




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

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




 http://cubee.github.com/src/calend
        ar/demo/calendar.html
More…


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

Mais conteúdo relacionado

Semelhante a Js设计模式

Java23种设计模式(总结)
Java23种设计模式(总结)Java23种设计模式(总结)
Java23种设计模式(总结)xuanlong282
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版Jackson Tian
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践taobao.com
 
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩Wen-Tien Chang
 
Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0智興 陳
 
SeaJS 那些事儿
SeaJS 那些事儿SeaJS 那些事儿
SeaJS 那些事儿lifesinger
 
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發Weizhong Yang
 
打造你專屬的Xcode plugin
打造你專屬的Xcode plugin打造你專屬的Xcode plugin
打造你專屬的Xcode pluginYuhua Chen
 
Node js实践
Node js实践Node js实践
Node js实践myzykj
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plusDongxu Yao
 
面向未来的前端类库开发 — KISSY 类库构想与实践
面向未来的前端类库开发  — KISSY 类库构想与实践面向未来的前端类库开发  — KISSY 类库构想与实践
面向未来的前端类库开发 — KISSY 类库构想与实践taobao.com
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanismlifesinger
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)jeffz
 
Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践Li Yi
 
面向对象设计七大原则
面向对象设计七大原则面向对象设计七大原则
面向对象设计七大原则zoorz
 
關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版Kirk Chen
 

Semelhante a Js设计模式 (20)

Java23种设计模式(总结)
Java23种设计模式(总结)Java23种设计模式(总结)
Java23种设计模式(总结)
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
 
Mvc
MvcMvc
Mvc
 
Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0
 
SeaJS 那些事儿
SeaJS 那些事儿SeaJS 那些事儿
SeaJS 那些事儿
 
前端测试
前端测试前端测试
前端测试
 
前端测试
前端测试前端测试
前端测试
 
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
 
打造你專屬的Xcode plugin
打造你專屬的Xcode plugin打造你專屬的Xcode plugin
打造你專屬的Xcode plugin
 
Node js实践
Node js实践Node js实践
Node js实践
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
面向未来的前端类库开发 — KISSY 类库构想与实践
面向未来的前端类库开发  — KISSY 类库构想与实践面向未来的前端类库开发  — KISSY 类库构想与实践
面向未来的前端类库开发 — KISSY 类库构想与实践
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanism
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
 
Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践
 
面向对象设计七大原则
面向对象设计七大原则面向对象设计七大原则
面向对象设计七大原则
 
關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版
 
Jasmine
JasmineJasmine
Jasmine
 

Mais de jay li

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版jay li
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
Jswebapps
JswebappsJswebapps
Jswebappsjay li
 
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript潜力无限的编程语言Javascript
潜力无限的编程语言Javascriptjay li
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器jay li
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础jay li
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼jay li
 
F2e security
F2e securityF2e security
F2e securityjay li
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟jay li
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎jay li
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤jay li
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问jay li
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developerjay li
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
Html5form
Html5formHtml5form
Html5formjay li
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkitjay li
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计jay li
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计jay li
 

Mais de jay li (20)

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Jswebapps
JswebappsJswebapps
Jswebapps
 
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼
 
F2e security
F2e securityF2e security
F2e security
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developer
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
Html5form
Html5formHtml5form
Html5form
 
Slide
SlideSlide
Slide
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkit
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计
 

Js设计模式