More Related Content Similar to Yui3在美团 2 (20) Yui3在美团 22. • / spring
http://shangchun.net
springuper@gmail.com
• 2010 12
•
3. • YUI3
YUI3
•
Combo Loading
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;
};
11. YUI3
Drag & Drop Animation
Component IO Cookie JSON ...
Component Widget Base
Framework Attribute Plugin
DOM Node
Core Event OOP
Seed YUI
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. ’);
“);
28. •
• YUI3 - below the surface Luke Smith
• YUI2 YUI3
•