• Like
Yui3在美团 2
Upcoming SlideShare
Loading in...5
×

Yui3在美团 2

  • 1,208 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,208
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
18
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. YUI3 2011-7-30
  • 2. • / spring http://shangchun.net springuper@gmail.com• 2010 12•
  • 3. • YUI3 YUI3• Combo Loading
  • 4. •••
  • 5. YUI2 YUI3YUI3 YUI
  • 6. Chaining SelectorAOP 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. addYUI.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. useYUI.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 AnimationComponent IO Cookie JSON ...Component Widget BaseFramework Attribute Plugin DOM Node Core Event OOP Seed YUI
  • 12. •• Combo• Loading•
  • 13. mis crm finance stat... www ecom...
  • 14. ••••
  • 15. 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
  • 16. mis-order mis-misc ...www-base mis-base w-base w-autocomplete ... mt-base vendor yui node event io ...
  • 17. 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 ... ...
  • 18. 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;};
  • 19. // 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 });})();
  • 20. // helper/FileHelper.phpprivate static $groups = array( ‘core’ => array(...), ‘www’ => array(...), ‘mis’ => array( ‘mis-deal’ => array( ‘path’ => ‘mis/js/deal.js’, ‘requires’ => array(‘mis-base’, ‘w-tab’), ), ), ...);
  • 21. Combo Minify (BSD, http://code.google.com/p/minify/)// debugFirePHP// 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;
  • 22. 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. ’);“);
  • 23. 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
  • 24. •• YUI3 - below the surface Luke Smith• YUI2 YUI3•
  • 25. • MacBook Pro• 27” IPS• ENJOY
  • 26. Thanks Q &A