Yui3在美团 2

1,587 views

Published on

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,587
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Yui3在美团 2

  1. 1. YUI3 2011-7-30
  2. 2. • / spring http://shangchun.net springuper@gmail.com• 2010 12•
  3. 3. • YUI3 YUI3• Combo Loading
  4. 4. •••
  5. 5. YUI2 YUI3YUI3 YUI
  6. 6. Chaining SelectorAOP YUI3 Loader OOP
  7. 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. 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. 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. 10. Module vs <script>••••
  11. 11. YUI3 Drag & Drop AnimationComponent IO Cookie JSON ...Component Widget BaseFramework Attribute Plugin DOM Node Core Event OOP Seed YUI
  12. 12. •• Combo• Loading•
  13. 13. mis crm finance stat... www ecom...
  14. 14. ••••
  15. 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. 16. mis-order mis-misc ...www-base mis-base w-base w-autocomplete ... mt-base vendor yui node event io ...
  17. 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. 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. 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. 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. 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. 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. 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. 24. •• YUI3 - below the surface Luke Smith• YUI2 YUI3•
  25. 25. • MacBook Pro• 27” IPS• ENJOY
  26. 26. Thanks Q &A

×