This document discusses YUI3 (Yahoo! User Interface Library 3). It describes how YUI3 uses combo loading to reduce the number of HTTP requests, how modules are added and used via the add() and use() methods, and how YUI3 implements object-oriented programming (OOP) principles. It also provides examples of how to define and load modules for a site application using YUI3 and PHP.

1. YUI3
2011-7-30

2. • / spring
http://shangchun.net
springuper@gmail.com
• 2010 12
•

3. • YUI3
YUI3
•
Combo Loading

4. •
•
•

5. YUI2
YUI3
YUI3 YUI

6. Chaining Selector
AOP YUI3
Loader
OOP

7. var Y = YUI();
YUI.add(‘test’, function(Y) { Y.use(‘test’, function(Y) {
Y.sayHello = function() { Y.sayHello(); // alert
alert(‘Hello, world!’); });
}; YUI().use(function(Y) {
}); Y.sayHello(); // error
});

8. add
YUI.prototype.add = function(name, fn, details) {
// register on the global object YUI
YUI.Env.mods[name] = {
name: name,
fn: fn,
details: details || {}
};
return this;
};
YUI.add = YUI.prototype.add;

9. use
YUI.prototype.use = function() {
var Y = this, r = [],
args = Array.prototype.slice.call(arguments, 0),
callback = args[args.length - 1],
process = function(names) { ... };
args.pop();
process(args); // calculate sorted full module list r
Y._attach(r); // add the apis to Y
callback(Y);
return this;
};

10. Module vs <script>
•
•
•
•

11. YUI3
Drag & Drop Animation
Component IO Cookie JSON ...
Component Widget Base
Framework Attribute Plugin
DOM Node
Core Event OOP
Seed YUI

12. •
• Combo
• Loading
•

13. mis crm finance stat... www ecom...

15. •
•
•
•

16. javascript
mis-deal mis-order
Site App finance-pay stat-compete ...
Site Core mis-base www-base ...
mt-base w-base w-table
Core w-autocomplete ...
Base & Frame YUI3

17. mis-order mis-misc ...
www-base mis-base w-base w-autocomplete ...
mt-base vendor
yui node event io ...

18. mt.js [mt-base] w-base.js [w-base]
core w-tab.js [w-tab] w-date.js [w-date] ...
www in the near future
base.js [mis-base] deal.js [mis-deal]
static mis js order.js [mis-order] misc.js [mis-misc]
finance js pay.js [finance-pay]
vendor js jquery.min.js zeroClipboard.js ...
...

20. var M = window.M || {};
M._YUI = YUI;
M.add = function() {
M._YUI.add.apply(M._YUI, arguments);
return this;
};
M.use = function() {
var instance = M._YUI(YUI_META);
instance.use.apply(instance, arguments);
return this;
};

21. // static/mis/js/deal.js
(function() {
M.add(‘mis-deal’, function(Y) {
var $MIS = Y.mt.mis, isIE = Y.UA.ie ... // shortcut
var CONST = ‘const value‘ ... // const
Y.namespace(‘mt.mis.Deal’);
Y.mt.mis.Deal = {
editInfo:function(param) { ... }
};
}, ‘1.0.0’, { requires:M.Groups[‘mis’][‘modules’][‘deal’].requires });
})();

22. // helper/FileHelper.php
private static $groups = array(
‘core’ => array(...),
‘www’ => array(...),
‘mis’ => array(
‘mis-deal’ => array(
‘path’ => ‘mis/js/deal.js’,
‘requires’ => array(‘mis-base’, ‘w-tab’),
),
),
...
);

23. Combo
Minify (BSD, http://code.google.com/p/minify/)
// debug
FirePHP
// bad request header, CDN caches 400
$min_serveOptions[‘badRequestHeader’] = ‘HTTP/1.0 404 Not Found’;
// stop minifiers
$min_serveOptions[‘minifiers’] [‘application/x-javascript’] = null;
$min_serveOptions[‘minifiers’] [‘text/css’] = null;

25. Loader
// php frame
$loader = new YUILoader( PHP Loader
FileHelper::YUI3_VERSION,
FilerHelper::getMTModules()
);
// template
$loader->misInit(‘mis-deal’, “
Y.mt.mis.Deal.editInfo(‘. $status. ’, ‘ . $modReason. ’);
“);

27. http://c.meituan.net/f=static/mis/js/base.v1692bda7.js,static/core/w-
core.vea9d9098.js,static/core/w-base.v24ec835d.js,static/vendor/js/data-
pinyin.vc77e80e1.js,static/core/w-autocomplete.vd0296db5.js,static/core/
w-table.vcb4c553c.js,static/core/w-date.vc94a7365.js,static/core/w-
validate.va0f58428.js
v + md5

28. •
• YUI3 - below the surface Luke Smith
• YUI2 YUI3
•

29. • MacBook Pro
• 27” IPS
• ENJOY

30. Thanks
Q &A