Why YUI3

Why we use YUI3?

Transcript

1. 淘宝前端开发⼯工程师 @虎⽛牙K 虎⽛牙 Why YUI3?
2. • ⻚页⾯面多⽽而重 • 交互愈发细致复杂 • 代码量迅速膨胀 • 团队⼈人员扩张 • 维护成本增加 前端⼯工程师的困扰
3. • 更好地代码管理 • 使代码更有灵活性 • 编写可维护的代码 YUI3能做什么？
4. 管理你的代码
5. <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script src="a.js"></script> <script src="A.js"></script> <script src="b.js"></script> <script src="Ab.js"></script> </head> <body> <!-- More Code --> </body> </html> 还记得那⼀一年...
6. 脚本阻塞
7. 按序加载执行
8. 异步脚本加载
9. 处理依赖关系
10. 单兵作战
11. 多人协作
12. Oops!  代码冲突！
14. You need a Boss!!!
17. # module
18. 开始使⽤用YUI3 <script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
19. YUI().use('node', function(Y) { doSomething(); }); 开始使⽤用YUI3 <script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
20. Combo 请求 Combo
21. Combo 请求 Combo
22. YUI({ combine: false }).use('node', function(Y) { doSomething(); }); 取消 Combo <script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
23. combine: false 并⾏行下载
24. YUI3模块列表
25. YUI3模块列表 300+
26. 如何⾃自定义模块？
27. YUI.add('hello', function(Y) { Y.Hello = { say: function() { console.log('hello'); } }; }, '0.0.1', { requires: ['node', 'event'] }); 注册模块 hello.js
28. YUI().use('hello', function(Y) { Y.Hello.say(); }); 使⽤用模块 page.html
29. YUI().use('hello', function(Y) { Y.Hello.say(); }); 使⽤用模块 page.html :(
30. YUI({ modules: { 'hello': { path: 'hello/hello.js', requires: ['node', 'event'] } } }).use('hello', function(Y) { Y.Hello.say(); //hello }); 配置模块 page.html :)
31. YUI.add('hello', ...); YUI().use('hello', ...); YUI?
32. YUI.add('hello', ...); YUI().use('hello', ...); YUI?
33. YUI.add('hello', ...); YUI().use('hello', ...); YUI? YUI() == new YUI();
34. YUI().use('hello', function(Y) { Y.Hello.say(); }); YUI.add('hello', function(Y) { Y.Hello = { say: function() { console.log('hello'); } }; }, '0.0.1', { requires: ['node', 'event'] }); Y?
35. YUI().use('hello', function(Y) { Y.Hello.say(); }); YUI.add('hello', function(Y) { Y.Hello = { say: function() { console.log('hello'); } }; }, '0.0.1', { requires: ['node', 'event'] }); Y?
36. YUI().use('node', function(Y) { YUI().use('node', function(Y2) { Y.log(Y2 == Y); //false }); }); 强沙箱
37. YUI().use('node', function(Y) { YUI().use('node', function(Y2) { Y.log(Y2 == Y); //false }); }); 强沙箱 YUI().use('node', function(Y) { Y.use('node', function(Y2) { Y.log(Y2 == Y); //true }); });
38. ✓ 模块解耦 ✓ 按需加载 ✓ 异步加载 ✓ 减少HTTP请求 ✓ 强沙箱机制 ✓ 处理依赖关系 ✓ 模块顺序执⾏行 ✓ 模块信息配置 YUI3模块系统
39. 更专注于编码
40. 不可或缺的...
41. “钱不是万能的，但没有钱是万万不能的！”
42. # DOM
43. YUI().use('node', fn); DOM
44. query var item = Y.one('li'); var itemList = Y.all('li'); one all
45. methods itemList.setAttribute('num', '10'); itemList.setStyle('zIndex', 50); itemList.each(function(item, index) { item.setContent(index); }); one item.addClass('item'); item.appendChild('<p>Hello YUI3!</p>'); all
46. Y.one('p').get('innerHTML'); Y.one('input').get('value'); Y.one('div').get('offsetWidth'); get properties Y.one('p').set('innerHTML', 'hello'); Y.one('input').set('value', '1234'); set
47. # Events
48. Events YUI().use('event', fn);
49. Y.one('li').on('click', fn); on Y.all('li').on('click', fn); Y.one('li').on({ 'click': clickFn, 'dblclick': dblclickFn, 'mouseover': mouseoverFn, });
50. delegate Y.all('li').on('click', fn);
51. delegate Y.all('li').on('click', fn); Y.one('ul').delegate('click', fn, 'li');
52. node.on('click', fn); node.detach(); node.detach('click'); node.detach('click', fn); detach
53. node.on('click', fn); node.detach(); node.detach('click'); node.detach('click', fn); detach
54. var handler = node.on('click', fn); node.detach(); node.detach('click'); handler.detach(); detach
55. Y.one('a').on('click', function(e) { }); e
56. Y.one('a').on('click', function(e) { }); e e.preventDefault();
57. Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation();
58. Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.halt();
59. Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation();
60. Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
61. Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); e.halt(true);
62. Y.one('ul').on('click', function(e) { Y.log(e.target.get('tagName')); //li Y.log(e.currentTarget.get('tagName')); //ul Y.log(e.target == this); //true Y.log(e.target instanceof Y.Node;); //true e.target.addClass('item'); }); e
63. Y.on('domready', fn); Y.on('contentready', fn, '#content'); Y.on('available', fn, '#content'); lifecycle events
64. 使代码更加灵活
65. • ⾼高内聚低耦合 • 易通信易扩展 灵活性
66. # OOP
67. • extend • augment OOP
68. function Animal() {} Animal.prototype.move = function() { Y.log('move'); }; extend function Cat() { Cat.superclass.constructor.apply(this, arguments); } Y.extend(Cat, Animal); var cat = new Cat(); cat.move(); //move
69. function Fly() {} Fly.prototype.fly = function() { Y.log('fly'); }; augment Y.augment(Cat, Fly); var cat = new Cat(); cat.fly(); //fly
70. Y.log(cat instanceof Animal); //true Y.log(cat instanceof Fly); //false extend vs. augment
71. # Base
72. Base YUI().use('base', fn);
73. “Everything is based on Base” Base
74. • LifeCycle • Custom Event • Attribute • Extension • PluginHost Base
75. function Optimus() { Optimus.superclass.constructor.apply(this, arguments); } Optimus.NAME = 'optimus'; Optimus.ATTRS = {}; Y.extend(Optimus, Y.Base, { initializer: function() {}, destructor: function() {} }); LifeCycle
76. var optimus = new Optimus();
77. optimus.destroy();
79. function Optimus() { Optimus.superclass.constructor.apply(this, arguments); } Optimus.NAME = 'optimus'; Optimus.ATTRS = {}; Y.extend(Optimus, Y.Base, { initializer: function() { this.publish('rollout'); }, destructor: function() {}, commandTo: function(where) { this.fire('rollout', { where: where }); } }); Custom Event
80. var optimus = new Optimus(); optimus.commandTo('USA'); optimus.js Custom Event optimus.on('rollout', function(e) { bumblebee.rollout(e.where); }); bumblebee.js
81. var optimus = new Optimus(); optimus.commandTo('USA'); optimus.js Custom Event Y.on('optimus:rollout', function(e) { bumblebee.rollout(e.where); }); bumblebee.js Optimus.NAME = 'optimus';
82. 参数设置
83. Optimus.ATTRS = { node: { getter: function(v) { return v; }, setter: function(v) { return Y.one(v); }, value: null } }; Attribute
84. var optimus = new Optimus({node: '#node'}); var node = optimus.get('node'); optimus.set('node', '#otherNode'); Attribute
85. Y.extend(Optimus, Y.Base, { run: function() { this.fire('run'); }, stop: function() { this.fire('stop'); } }); Custom Event
86. var optimus = new Optimus(); optimus.run(); optimus.run(); optimus.run(); optimus.js Custom Event Y.on('optimus:run', function(e) { bumblebee.transform(); //3 times bumblebee.run(); }); bumblebee.js
87. function Optimus() { this.running = false; } optimus.running = true; Property 什么都没有发⽣生...
88. Optimus.ATTRS = { running: { getter: function(v) { return v; }, setter: function(v) { return !!v; }, value: false } }; Attribute
89. optimus.after('runningChange', function(e) { Y.log(e.prevVal); //false Y.log(e.newVal); //true }); optimus.set('running', true); Attribute Change Event
90. Attribute Optimus.ATTRS = { running: { getter: function(v) { return v; }, setter: function(v) { return !!v; }, value: false } }; Y.extend(Optimus, Y.Base, { initializer: function() { this.after('runningChange', function(e) { this.fire(e.newVal ? 'run' : 'stop'); }); }, run: function() { this.set('running', true); }, stop: function() { this.set('running', false); } });
91. var optimus = new Optimus({running: null}); optimus.run(); optimus.run(); optimus.run(); optimus.js Attribute Y.on('optimus:run', function(e) { bumblebee.transform(); //1 time bumblebee.run(); }); bumblebee.js
92. Y.Base.create('optimus', Y.Base, [ OptimusHead, OptimusBody, OptimusFooter ], { initializer: function() {}, destructor: function() {}, run: function() {}, stop: function() {} }, { ATTRS: {} }); Base.create
94. optimus.plug(Optimus.Weapon, { bullets: 50 }); optimus.weapon.fire(); optimus.unplug(Optimus.Weapon); PluginHost Optimus.Weapon.NS = 'weapon';
95. 可维护性的代码
96. 无兄弟不篮球
97. - 你被耍了 - 每当我扣篮，看下30、40分 - 你还真以为，那是我⼀一个⼈人干的 - 不过说真的 - ⽐比赛是整个团队的 - 信不信由你 ⽆无兄弟不篮球
98. - 你被耍了 - 每当我做项⺫⽬目，开发30、40个组件与模块 - 你还真以为，那是我⼀一个⼈人干的 - 不过说真的 - 编程是整个团队的 - 信不信由你 ⽆无兄弟不前端
99. • 分⼯工明确 - 模块化开发 • ⽆无缝配合 - 事件通信 • 接⼝口清晰 - API清晰统⼀一 • 磨合简单 - ⽂文档完善 • ⾓角⾊色灵活 - 代码⻛风格统⼀一 多⼈人协作
100. http://yuilibrary.com/yui/docs/yui/ ⽂文档
101. http://yuilibrary.com/yui/docs/api/files/yui_js_yui.js.html 注释
102. http://yui.github.io/yuidoc/ YUIDoc
103. 编码规范
104. Y?UI
105. 没有最完美的，只有最适合的
106. Q&A
107. Thanks!