Why YUI3

淘宝前端开发⼯工程师 @虎⽛牙K 虎⽛牙 Why YUI3?

• ⻚页⾯面多⽽而重 • 交互愈发细致复杂 • 代码量迅速膨胀 • 团队⼈人员扩张 • 维护成本增加
前端⼯工程师的困扰

• 更好地代码管理 • 使代码更有灵活性 • 编写可维护的代码 YUI3能做什么？

管理你的代码

<!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>  </body> </html> 还记得那⼀一年...

脚本阻塞

按序加载执行

异步脚本加载

处理依赖关系

单兵作战

多人协作

Oops! 代码冲突！

You need a Boss!!!

# module

开始使⽤用YUI3 <script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>

YUI().use('node', function(Y) { doSomething(); }); 开始使⽤用YUI3 <script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>

Combo 请求 Combo

YUI({ combine: false }).use('node', function(Y) { doSomething(); }); 取消 Combo
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>

combine: false 并⾏行下载

YUI3模块列表

YUI3模块列表 300+

如何⾃自定义模块？

YUI.add('hello', function(Y) { Y.Hello = { say: function() { console.log('hello');
} }; }, '0.0.1', { requires: ['node', 'event'] }); 注册模块 hello.js

YUI().use('hello', function(Y) { Y.Hello.say(); }); 使⽤用模块 page.html

YUI().use('hello', function(Y) { Y.Hello.say(); }); 使⽤用模块 page.html :(

YUI({ modules: { 'hello': { path: 'hello/hello.js', requires: ['node', 'event']
} } }).use('hello', function(Y) { Y.Hello.say(); //hello }); 配置模块 page.html :)

YUI.add('hello', ...); YUI().use('hello', ...); YUI?

YUI.add('hello', ...); YUI().use('hello', ...); YUI? YUI() == new YUI();

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?

YUI().use('node', function(Y) { YUI().use('node', function(Y2) { Y.log(Y2 == Y); //false
}); }); 强沙箱

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 }); });

✓ 模块解耦 ✓ 按需加载 ✓ 异步加载 ✓ 减少HTTP请求 ✓ 强沙箱机制
✓ 处理依赖关系 ✓ 模块顺序执⾏行 ✓ 模块信息配置 YUI3模块系统

更专注于编码

不可或缺的...

“钱不是万能的，但没有钱是万万不能的！”

YUI().use('node', fn); DOM

query var item = Y.one('li'); var itemList = Y.all('li'); one
all

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

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

# Events

Events YUI().use('event', fn);

Y.one('li').on('click', fn); on Y.all('li').on('click', fn); Y.one('li').on({ 'click': clickFn, 'dblclick': dblclickFn,
'mouseover': mouseoverFn, });

delegate Y.all('li').on('click', fn);

delegate Y.all('li').on('click', fn); Y.one('ul').delegate('click', fn, 'li');

node.on('click', fn); node.detach(); node.detach('click'); node.detach('click', fn); detach

var handler = node.on('click', fn); node.detach(); node.detach('click'); handler.detach(); detach

Y.one('a').on('click', function(e) { }); e

Y.one('a').on('click', function(e) { }); e e.preventDefault();

Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation();

Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.halt();

Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation();

Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();

Y.one('a').on('click', function(e) { }); e e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); e.halt(true);

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

Y.on('domready', fn); Y.on('contentready', fn, '#content'); Y.on('available', fn, '#content'); lifecycle events

使代码更加灵活

• ⾼高内聚低耦合 • 易通信易扩展灵活性

• extend • augment OOP

function Fly() {} Fly.prototype.fly = function() { Y.log('fly'); }; augment
Y.augment(Cat, Fly); var cat = new Cat(); cat.fly(); //fly

Y.log(cat instanceof Animal); //true Y.log(cat instanceof Fly); //false extend vs.
augment

# Base

Base YUI().use('base', fn);

“Everything is based on Base” Base

• LifeCycle • Custom Event • Attribute • Extension •
PluginHost Base

var optimus = new Optimus();

optimus.destroy();

var optimus = new Optimus(); optimus.commandTo('USA'); optimus.js Custom Event optimus.on('rollout',
function(e) { bumblebee.rollout(e.where); }); bumblebee.js

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';

参数设置

Optimus.ATTRS = { node: { getter: function(v) { return v;
}, setter: function(v) { return Y.one(v); }, value: null } }; Attribute

var optimus = new Optimus({node: '#node'}); var node = optimus.get('node');
optimus.set('node', '#otherNode'); Attribute

Y.extend(Optimus, Y.Base, { run: function() { this.fire('run'); }, stop: function()
{ this.fire('stop'); } }); Custom Event

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

function Optimus() { this.running = false; } optimus.running = true;
Property 什么都没有发⽣生...

Optimus.ATTRS = { running: { getter: function(v) { return v;
}, setter: function(v) { return !!v; }, value: false } }; Attribute

optimus.after('runningChange', function(e) { Y.log(e.prevVal); //false Y.log(e.newVal); //true }); optimus.set('running', true);
Attribute Change Event

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); } });

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

Y.Base.create('optimus', Y.Base, [ OptimusHead, OptimusBody, OptimusFooter ], { initializer: function()
{}, destructor: function() {}, run: function() {}, stop: function() {} }, { ATTRS: {} }); Base.create

optimus.plug(Optimus.Weapon, { bullets: 50 }); optimus.weapon.fire(); optimus.unplug(Optimus.Weapon); PluginHost Optimus.Weapon.NS =
'weapon';

可维护性的代码

无兄弟不篮球

- 你被耍了 - 每当我扣篮，看下30、40分 - 你还真以为，那是我⼀一个⼈人干的 - 不过说真的 - ⽐比赛是整个团队的
- 信不信由你⽆无兄弟不篮球

- 你被耍了 - 每当我做项⺫⽬目，开发30、40个组件与模块 - 你还真以为，那是我⼀一个⼈人干的 - 不过说真的 - 编程是整个团队的
- 信不信由你⽆无兄弟不前端

• 分⼯工明确 - 模块化开发 • ⽆无缝配合 - 事件通信 • 接⼝口清晰
- API清晰统⼀一 • 磨合简单 - ⽂文档完善 • ⾓角⾊色灵活 - 代码⻛风格统⼀一多⼈人协作

http://yuilibrary.com/yui/docs/yui/ ⽂文档

http://yuilibrary.com/yui/docs/api/ﬁles/yui_js_yui.js.html 注释

http://yui.github.io/yuidoc/ YUIDoc

编码规范

没有最完美的，只有最适合的

Thanks!

Why YUI3

Why YUI3

More Decks by ningzbruc

Other Decks in Technology

Featured

Transcript