Enviar pesquisa
Carregar
Js设计模式
•
15 gostaram
•
1,076 visualizações
jay li
Seguir
结合实例简单介绍js中常用的一些设计模式
Leia menos
Leia mais
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 20
Recomendados
vmarket in action
vmarket in action
Appleseedez Zeng
KISSY for starter
KISSY for starter
yiming he
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
Kissy in-progress
Kissy in-progress
yiming he
Web设计的画纸深入了解我们的显示器
Web设计的画纸深入了解我们的显示器
jay li
Kissy design
Kissy design
yiming he
Kissy简介
Kissy简介
jay li
20110524 apestaartjaren3 presentatie_onderzoek
20110524 apestaartjaren3 presentatie_onderzoek
Apestaartjaren
Mais conteúdo relacionado
Semelhante a Js设计模式
Java23种设计模式(总结)
Java23种设计模式(总结)
xuanlong282
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
Wen-Tien Chang
Mvc
Mvc
tbmallf2e
Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0
智興 陳
SeaJS 那些事儿
SeaJS 那些事儿
lifesinger
前端测试
前端测试
frontwindysky
前端测试
前端测试
Zheng Biao
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
Weizhong Yang
打造你專屬的Xcode plugin
打造你專屬的Xcode plugin
Yuhua Chen
Node js实践
Node js实践
myzykj
Javascript primer plus
Javascript primer plus
Dongxu Yao
面向未来的前端类库开发 — KISSY 类库构想与实践
面向未来的前端类库开发 — KISSY 类库构想与实践
taobao.com
KISSY Mechanism
KISSY Mechanism
lifesinger
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
jeffz
Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践
Li Yi
面向对象设计七大原则
面向对象设计七大原则
zoorz
關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版
Kirk Chen
Jasmine
Jasmine
tb-vertical-guide
Semelhante a Js设计模式
(20)
Java23种设计模式(总结)
Java23种设计模式(总结)
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
Mvc
Mvc
Net 相依性注入 學習筆記 1.0
Net 相依性注入 學習筆記 1.0
SeaJS 那些事儿
SeaJS 那些事儿
前端测试
前端测试
前端测试
前端测试
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
打造你專屬的Xcode plugin
打造你專屬的Xcode plugin
Node js实践
Node js实践
Javascript primer plus
Javascript primer plus
面向未来的前端类库开发 — KISSY 类库构想与实践
面向未来的前端类库开发 — KISSY 类库构想与实践
KISSY Mechanism
KISSY Mechanism
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践
面向对象设计七大原则
面向对象设计七大原则
關於 Javascript 非同步的那些事兒 公開版
關於 Javascript 非同步的那些事兒 公開版
Jasmine
Jasmine
Mais de jay li
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Jswebapps
Jswebapps
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
深入剖析浏览器
深入剖析浏览器
jay li
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Javascript autoload
Javascript autoload
jay li
Html5form
Html5form
jay li
Slide
Slide
jay li
Js doc toolkit
Js doc toolkit
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
Mais de jay li
(20)
犀牛书第六版
犀牛书第六版
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Jswebapps
Jswebapps
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Responsive Web UI Design
Responsive Web UI Design
深入剖析浏览器
深入剖析浏览器
HTML/CSS/JS基础
HTML/CSS/JS基础
淘宝前端技术巡礼
淘宝前端技术巡礼
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Html5form
Html5form
Slide
Slide
Js doc toolkit
Js doc toolkit
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
Js设计模式
1.
Javascript 设计模式
拔赤 bachi@taobao.com http://www.uedagazine.com 2010-09-17
2.
Java编程思想
JavaScript设计模式 (扫盲) (进阶)
3.
•
单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
4.
• 单体 •
桥接 • 工厂 • 装饰者 • 适配器 • 观察者
5.
单体 /*单体*/ var Singleton =
{ attribute1:true, attribute2:10, method1:function(){}, method2:function(){} };
6.
• 单体 • 桥接 •
工厂 • 装饰者 • 适配器 • 观察者
7.
桥接 /*桥接*/ Y.on('click',function(e){
//e? }); nodelist.each(function(node){ //node? }); Y.Box.alert('msg',function(box){ //box? });
8.
• 单体 • 桥接 •
工厂 • 装饰者 • 适配器 • 观察者
9.
工厂 /*生成各种选号玩法的实例*/ //时时彩组选和值 var ssc_zxhz =
new C.AbacusFactory(key1); //大乐透普通玩法 var dlt_n = new C.AbacusFactory(key2); //大乐透上传选球 var dlt_upload = new C.AbacusFactory(key3); //接下来需要对各种玩法进行各自的包装 (简单)工厂:通用构造,初级解耦
10.
• 单体 • 桥接 •
工厂 • 装饰者 • 适配器 • 观察者
11.
装饰者 /*对实例进行包装*/ Var node =
$(HTMLElement); 装饰者:对实例进行包装
12.
装饰者 续 //创建"时时彩组选和值"包装器 var sscDecorator
= function(instance){ //wrap instance return wrapped_instance; }; //通过工厂创建一个玩法实例 var ssc = new C.AbacusFactory('SSC'); //将这个实例进行重新包装 var ssc = sscDecorator(ssc); 彩票一个玩法的实现骨架
13.
•
单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
14.
适配器
多种格式接口的转换器
15.
适配器 续
多种格式接口的转换器
16.
•
单体 • 桥接 • 工厂 • 装饰者 • 适配器 • 观察者
17.
观察者 //给a标签绑定一个监听 $('a').onclick = function(){
alert(this); }; 当…的时候,发生…
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.
More…
抽象工厂,门面,原型 组合,享元,代理 命令,中介,职责链,备忘录,策略,状态
20.
Q&A