Enviar búsqueda
Cargar
201001 100208094620-phpapp01
•
Descargar como PPTX, PDF
•
1 recomendación
•
185 vistas
Bob Huang
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 40
Descargar ahora
Recomendados
Como impulsionar sua carreira através das Mídias Digitais
Como impulsionar sua carreira através das Mídias Digitais
Leonardo Diogo Silva
春雨路演
春雨路演
36Kr.com
Glossário de Métricas – Web Analytics
Glossário de Métricas – Web Analytics
Leonardo Diogo Silva
WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.
WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.
AEGIS-ACCESSIBLE Projects
Preemployrefcheck
Preemployrefcheck
Tufail Ahmed
Ext JS Meetup Presentation
Ext JS Meetup Presentation
Patrick Sheridan
Network
Network
rumoorthyit
Tb Ly And Html5
Tb Ly And Html5
taobao.com
Recomendados
Como impulsionar sua carreira através das Mídias Digitais
Como impulsionar sua carreira através das Mídias Digitais
Leonardo Diogo Silva
春雨路演
春雨路演
36Kr.com
Glossário de Métricas – Web Analytics
Glossário de Métricas – Web Analytics
Leonardo Diogo Silva
WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.
WAI-ARIA and the OpenAjax Alliance Accessibility Working Group.
AEGIS-ACCESSIBLE Projects
Preemployrefcheck
Preemployrefcheck
Tufail Ahmed
Ext JS Meetup Presentation
Ext JS Meetup Presentation
Patrick Sheridan
Network
Network
rumoorthyit
Tb Ly And Html5
Tb Ly And Html5
taobao.com
Porting Flickr to YUI3
Porting Flickr to YUI3
rharmes
Designing and Deploying Internet-Scale Services
Designing and Deploying Internet-Scale Services
bigqiang zou
What is an
What is an
Shivam Sehgal
点道
点道
36Kr.com
Assignment on footwear
Assignment on footwear
Shivam Sehgal
Liberty
Liberty
Shivam Sehgal
Aria au pays du Web
Aria au pays du Web
JPVillain
Toegankelijkheid met WAI-ARIA
Toegankelijkheid met WAI-ARIA
Arjan Eising
Unit 5 indian eco
Unit 5 indian eco
Tufail Ahmed
Front-end makes change
Front-end makes change
keelii
Indicadores de Mercado Digital 2011 - IAB Brasil
Indicadores de Mercado Digital 2011 - IAB Brasil
Leonardo Diogo Silva
Introduction to Fire.js (alpha)
Introduction to Fire.js (alpha)
thepumpkin
性能问题的快速定位
性能问题的快速定位
tb-vertical-guide
Assignment on footwear
Assignment on footwear
Shivam Sehgal
2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本
tbmallf2e
thesignLab | book2010
thesignLab | book2010
thesignLab
Combo Design Presentation
Combo Design Presentation
Retirement_Plan_Specialists
F3 - Refined Delicate
F3 - Refined Delicate
Catherine Group
Gsm 03-42 v300
Gsm 03-42 v300
Bob Huang
Gsm 04.08
Gsm 04.08
Bob Huang
Oracle 经验操作
Oracle 经验操作
Bob Huang
Vpmn业务
Vpmn业务
Bob Huang
Más contenido relacionado
Destacado
Porting Flickr to YUI3
Porting Flickr to YUI3
rharmes
Designing and Deploying Internet-Scale Services
Designing and Deploying Internet-Scale Services
bigqiang zou
What is an
What is an
Shivam Sehgal
点道
点道
36Kr.com
Assignment on footwear
Assignment on footwear
Shivam Sehgal
Liberty
Liberty
Shivam Sehgal
Aria au pays du Web
Aria au pays du Web
JPVillain
Toegankelijkheid met WAI-ARIA
Toegankelijkheid met WAI-ARIA
Arjan Eising
Unit 5 indian eco
Unit 5 indian eco
Tufail Ahmed
Front-end makes change
Front-end makes change
keelii
Indicadores de Mercado Digital 2011 - IAB Brasil
Indicadores de Mercado Digital 2011 - IAB Brasil
Leonardo Diogo Silva
Introduction to Fire.js (alpha)
Introduction to Fire.js (alpha)
thepumpkin
性能问题的快速定位
性能问题的快速定位
tb-vertical-guide
Assignment on footwear
Assignment on footwear
Shivam Sehgal
2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本
tbmallf2e
thesignLab | book2010
thesignLab | book2010
thesignLab
Combo Design Presentation
Combo Design Presentation
Retirement_Plan_Specialists
F3 - Refined Delicate
F3 - Refined Delicate
Catherine Group
Destacado
(18)
Porting Flickr to YUI3
Porting Flickr to YUI3
Designing and Deploying Internet-Scale Services
Designing and Deploying Internet-Scale Services
What is an
What is an
点道
点道
Assignment on footwear
Assignment on footwear
Liberty
Liberty
Aria au pays du Web
Aria au pays du Web
Toegankelijkheid met WAI-ARIA
Toegankelijkheid met WAI-ARIA
Unit 5 indian eco
Unit 5 indian eco
Front-end makes change
Front-end makes change
Indicadores de Mercado Digital 2011 - IAB Brasil
Indicadores de Mercado Digital 2011 - IAB Brasil
Introduction to Fire.js (alpha)
Introduction to Fire.js (alpha)
性能问题的快速定位
性能问题的快速定位
Assignment on footwear
Assignment on footwear
2011 04-19 html5 css3 及脚本
2011 04-19 html5 css3 及脚本
thesignLab | book2010
thesignLab | book2010
Combo Design Presentation
Combo Design Presentation
F3 - Refined Delicate
F3 - Refined Delicate
Más de Bob Huang
Gsm 03-42 v300
Gsm 03-42 v300
Bob Huang
Gsm 04.08
Gsm 04.08
Bob Huang
Oracle 经验操作
Oracle 经验操作
Bob Huang
Vpmn业务
Vpmn业务
Bob Huang
Cap信令原理
Cap信令原理
Bob Huang
Gsm智能网原理
Gsm智能网原理
Bob Huang
移动智能应答业务
移动智能应答业务
Bob Huang
浙江电信移动业务接入实践20100513
浙江电信移动业务接入实践20100513
Bob Huang
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Bob Huang
高性能网站建设指南
高性能网站建设指南
Bob Huang
百度排名优化方法及注意事项
百度排名优化方法及注意事项
Bob Huang
Random 101214055524-phpapp01
Random 101214055524-phpapp01
Bob Huang
Mysql 101014202926-phpapp01
Mysql 101014202926-phpapp01
Bob Huang
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Bob Huang
Mysql gdb-101022041146-phpapp01
Mysql gdb-101022041146-phpapp01
Bob Huang
Más de Bob Huang
(15)
Gsm 03-42 v300
Gsm 03-42 v300
Gsm 04.08
Gsm 04.08
Oracle 经验操作
Oracle 经验操作
Vpmn业务
Vpmn业务
Cap信令原理
Cap信令原理
Gsm智能网原理
Gsm智能网原理
移动智能应答业务
移动智能应答业务
浙江电信移动业务接入实践20100513
浙江电信移动业务接入实践20100513
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
高性能网站建设指南
高性能网站建设指南
百度排名优化方法及注意事项
百度排名优化方法及注意事项
Random 101214055524-phpapp01
Random 101214055524-phpapp01
Mysql 101014202926-phpapp01
Mysql 101014202926-phpapp01
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Introduction to-taobao-cdn-at-linuxfb-v0-2-100620101417-phpapp01
Mysql gdb-101022041146-phpapp01
Mysql gdb-101022041146-phpapp01
201001 100208094620-phpapp01
1.
The Beauty Of
Refactoring重构之美 Taobao UED 玉伯 @ Jan, 2010
2.
祝云谦、闭月生日快乐!
3.
Who’s this guy?
回看射雕处,千里暮云平。 Be a singer for our life. 孙玉伯是真正的男人。-- 古龙《流星·蝴蝶·剑》 http://lifesinger.org/
4.
淘宝网上的常用 Widgets
5.
名词解释 Tabs –
标签页,相关命名:TabView, TabControl Slide – 幻灯片 / 卡盘 / 轮播,相关命名:SlideView
6.
2007- TBra
7.
TBra 的解决方案 SimpleTab
+ SimpleSlide 优点:简单 组件完全独立,无依赖 简单易用 缺点:太简单 灵活性上有欠缺 重复代码
8.
第一次重构:传统 OO 思路
9.
2008 - Unicorn
2008:谈谈淘宝上常用 JS 组件的实现 PPT
10.
2008 年的思考 面向对象,就是让代码变成有职责的生命体:
Tabs 和 Slide 的共同特点: 都有导航触点 triggers 都含有一组面板 panels 通过触点可以切换面板 Slide 特有的: 可以设定为自动切换 切换时可以设定各种效果(垂直滚动、水平滚动、淡隐淡现等)
11.
2008 年的设计
12.
OO 方案分析 优点
分离了关注点,减少了代码重复 灵活性上有了提高 缺点 继承带来了依赖,权衡的困惑 依旧不够灵活,依旧有代码重复 不够 JavaScript
13.
第二次重构:难以摆脱的 OO
14.
基类
15.
难以摆脱的 OO 方案分析
中庸之道,看起来很美 总觉得代码不够 JavaScript
16.
第三次重构:还 JavaScript 本色
17.
2009 - Kissy
18.
2009 年,新的尝试 首先,代码要够
JavaScript 其次,要遵守设计模式基本原则
19.
够 JavaScript JavaScript
is NOT Java! JavaScript 是一门脚本语言,有自己的脾性。 OO 是术,不是目标。 Prototype, mixin, 条条大路通罗马。 怎么看世界,决定你怎么写代码。
20.
设计模式 三原则: 开放
- 封闭原则 从场景进行设计 包容变化,适度灵活 两准则: 惯例优于配置 组合优于继承
21.
再次思考……
22.
再次思考 Tabs 和
Slide 本质上有区别吗? 原本同一物, 何必分开住? Switchable
23.
组合优于继承 Tabs 是一个可切换的组件。
用代码表示: S.Widget(“id”).switchable();
24.
组合优于继承 Slide 是一个可自动切换的组件。
用代码表示: S.Widget(“id”).switchable({ autoplay: true });
25.
组合优于继承 iGoogle 上的
Gadget 是可拖拽和可收缩的组件。用代码表示: S.Widget(“id”).draggable() .collapsable();
26.
Widget 是啥? 可以简单理解为一个
jQuery 对象 也可以复杂想象成 YUI3 的 Widget Class 在 KISSY 里,保持简单:
27.
mixin 实现组合 JavaScript
的原型体制非常适合 mixin : S.mix(self, Switchable.prototype, false); 具体请参考:switchable.js http://kissy.googlecode.com/svn/trunk/src/widget-switchable/
28.
用插件分离功能点 plugin-autoplay.js plugin-effect.js
plugin-circular.js plugin-lazyload.js
29.
插件的实现机制 mixin: S.mix(Switchable.Config,
{ autoplay: false, interval: 5, pauseOnHover: true });
30.
插件的实现机制 AOP:
S.weave(function(){ /*…*/ }, “after”, Switchable.prototype, “_initSwitchable”);
31.
Public API 很重要
Tabs.js + Slide.js 非常简单的再次封装 S.Tabs(“id”); 等价: S.Widget(“id”).switchable({ autoplay: true });
32.
Public API 很重要
事件: S.Tabs(“id”).subscribe( “beforeSwitch”, function() { /* … */ });
33.
Demo http://kissy.googlecode.com/svn/trunk/src/widget-switchable/test.html
34.
灵活性 发现 Carousel
本质上也是可切换的组件。 Carousel.js
35.
灵活性 最简单的新闻滚动条: 稍微复杂的土豆今日焦点:
36.
灵活性 淘宝画报、看图购 Flickr
Slideshow 只要符合 switchable 可切换特性的组件,原则上都可以用 switchable 实现。 唯一限制你的是想象力。
37.
可扩展性 plugin-wheel.js -
支持鼠标滚动切换 plugin-apple.js – 苹果切换效果 …
38.
设计思想之关键词 组合优于继承 从场景进行设计
适度灵活
39.
代码实现之关键词 基于原型 prototype
充分利用 mixin 适当采用 aop 还 JavaScript 本色!
40.
Thanks ^o^
Descargar ahora