SeaJS - 前端模块化开发探索与网站性能优化实践

• 1. SeaJS - - Velocity2011.12Wednesday, December 7, 11

2. / Frank Wang / [email protected]: @lifesingerBlog: http://lifesinger.wordpress.com@Fortran, C, .NET, Java, JavaScript, NodeJSWednesday, December 7, 11 3. Wednesday, December 7, 11 4. The ProblemsWednesday, December 7, 11 5. 201098000Wednesday, December 7, 11 6. 201112view-source:http://www.sohu.com/ Wednesday, December 7, 11 7. 201112Wednesday, December 7, 11 8. YUI().use(io-base, mod-a, mod-b, function(Y) {// Y.on mod-a mod-b // Y on Y.on(...);// io-base Y io // Y.IO var request = Y.io(...); }); YUI3 Wednesday, December 7, 11 9. 201112CMSYUI 2.7.0KISSY 1.0.8+... = Wednesday, December 7, 11 10. #/etc/hosts 127.0.0.1 a.tbcdn.cnWillowJSlideWednesday, December 7, 11 11. querystring.js QueryString.parse(a=b&b=c); //=> { a: b, b: c } QueryString.stringify({ foo: bar }); //=> foo=barWednesday, December 7, 11 12. bug x Wednesday, December 7, 11 13. Design GoalsWednesday, December 7, 11 14. JavaScript developmentneeds to be done dierently.Wednesday, December 7, 11 15. module_a.js module_b.jsa_very_big_file.js module_c.js module_d.js ...Wednesday, December 7, 11 16. + Wednesday, December 7, 11 17. + FP.add({fp-mods: {fullpath: http://a.tbcdn.cn/??s/kissy/1.1.6/switchable/switchable-pkg- // in module_a.js:min.js,s/kissy/1.1.6/suggest/ require(path/to/module_x);suggest-pkg-min.js,s/kissy/1.1.6/datalazyload/ // in html page:datalazyload-pkg-min.js,s/ seajs.use(path/to/main);kissy/1.1.3/flash/flash-pkg-min.js,p/search/searchsuggest- // in deployment:min.js,p/fp/2011a/expressway/ $ spm build main.js --combineprofile-min.js,p/fp/2011a/header/header-min.js,p/fp/2011a/attraction/attraction-min.js,...}});Wednesday, December 7, 11 18. + // in module_x.js:// in module_x.js:var E = require(./event); var jq12 = require(jquery/1.2.6/jquery);var Desc = require(./desc); var jq17 = require(jquery/1.7.1/jquery);Wednesday, December 7, 11 19. sudo vi /etc/hostsUCool...Wednesday, December 7, 11 20. // in html page: // in node environment: // in init.js: // in init.js: require(seajs); var QS = require(querystring); var QS = require(querystring);Wednesday, December 7, 11 21. Wednesday, December 7, 11 22. SeaJS is a Module Loader for the Web.Wednesday, December 7, 11 23. https://github.com/seajshttp://seajs.comWednesday, December 7, 11 24. Usage and Examples ( using seajs 1.1.0)Wednesday, December 7, 11 25. 1. node: http://nodejs.org/dist/v0.6.4/node-v0.6.4.msi 2. spm: $ npm install spm -g 3. seajs: $ spm install seajsWednesday, December 7, 11 26. init.js: define(function() { alert(Hello, world!); }); test.html: dene use Wednesday, December 7, 11 27. init.js: define(function(require, exports) { exports.message = Hello, world!; }); test.html: exports use Wednesday, December 7, 11 28. init.js: define(function(require, exports) { var weather = require(./weather); var temperature = weather.getTemperature(Beijing); exports.message = The temperature of Beijing is + temperature; });weather.js: define(function(require, exports) { var io = require(./io); ... exports.getTemperature = function(city) { ... }; }); require + Wednesday, December 7, 11 29. define(function(require, exports, module) { var a = require(./a);require.async(./b, function(b) {...}); exports.x = ... ; });http://seajs.com/docs/zh-cn/module-denition.htmlWednesday, December 7, 11 30. transport abc.js:(function() {if (typeof ABC === undefined) {ABC = {};}ABC.doSth = function() { ... };ABC.someMember = ...;})();define(function(require, exports) {var ABC = exports;ABC.doSth = function() { ... };ABC.someMember = ...;});Wednesday, December 7, 11 31. transportunderscore/transport.js: /*** @package https://raw.github.com/documentcloud/underscore/master/package.json* @src http://documentcloud.github.com/underscore/underscore.js* @min http://documentcloud.github.com/underscore/underscore-min.js*/ (function(factory) { if (typeof define === function) { define(#{{id}}, [], factory); } else if (typeof exports !== undefined) { factory(require, exports, module); } else { factory(); } })(function(require, exports, module) { /*{{code}}*/ });Wednesday, December 7, 11 32. transport http://modules.seajs.com/https://github.com/seajs/modulesWednesday, December 7, 11 33. preloadWednesday, December 7, 11 34. preload seajs.config({ alias: {es5-safe: es5-safe/0.9.2/es5-safe,json: json/1.0.1/json }, preload: [Function.prototype.bind ? : es5-safe,this.JSON ? : json ] }); seajs.use(./init, function() { console.log([2, 4, 8].reduce(function(a, b) { return a * b; })); });Wednesday, December 7, 11 35. JSONM JSONP --> JSONM data.js: define({ name: Frank Wang, age: 31 });x.js: define(function(require, exports) { var data = require(path/to/data.js); ... });Wednesday, December 7, 11 36. SeaJS old_module.js: define(function(require, exports) { var $ = require(jquery/1.2.6/jquery); ... }); new_module.js: define(function(require, exports) { var $ = require(jquery/1.7.1/jquery); ... });Wednesday, December 7, 11 37. jquery-fancybox.js: define(function(require) { return function($) { if ($.fancybox) return;require(./jquery.easing.1.3.js)($);require(./jquery.mousewheel.js)($);require(./jquery.fancybox-1.3.4.css); $.fancybox = function(obj) { ... } ... }}); jQuery module_x.js: define(function(require, exports) { var $ = require(jquery/1.7.1/jquery); require(./jquery-fancybox.js)($); $.fancybox(...); });Wednesday, December 7, 11 38. lessWednesday, December 7, 11 39. less seajs.config({ alias: {less: less/1.1.5/less }, preload: [plugin-less] }); define(function(require, exports) { require(./style.less); ... });Wednesday, December 7, 11 40. lessplugin-text: plugin-json: JSON plugin-coee: coee plugin-less less ...Wednesday, December 7, 11 41. markzhi.comhttp://markzhi.com/Wednesday, December 7, 11 42. markzhi.comseajs-map.js:define(function() {var rules = [];rules.push([http://markzhi.com/assets/,http://localhost/markzhi/assets/]);seajs.config({map: rules});});Wednesday, December 7, 11 43. nodejs a.js: define(function(require, exports, module) { exports.basename = module.id.split(/[/]/).pop(); }); program.js: require(seajs); console.log(require(./a).basename);$ node program.jsWednesday, December 7, 11 44. SeaJS https://github.com/seajs/seajs/wiki/SeaJS-UsersWednesday, December 7, 11 45. Internal DesignWednesday, December 7, 11 46. CommonJS/Modules 1.1.1http://wiki.commonjs.org/wiki/Modules/1.1.1Wednesday, December 7, 11 47. Wednesday, December 7, 11 48. CommonJS global require paths Wednesday, December 7, 11 49. HTTP IE6-8.Wednesday, December 7, 11 50. Wrappings(function() {define(function(require, exports) {......})();});Web SeaJS dene.Wednesday, December 7, 11 51. CommonJS/Modules 1.1.1NodeJS ModulesDene WrappingsUnCommonJS SpecicationsWednesday, December 7, 11 52. BrowserLoadera.js b.jsc.js ...Wednesday, December 7, 11 53. Browser map combo trace ... Loader template less coffee css3 ...a.jsb.less c.coffee...Wednesday, December 7, 11 54. Browsermap... + combo server POC ... Loader SPM + RMSa.jsb.less c.coffee ...Wednesday, December 7, 11 55. https://github.com/seajs/seajs/tree/master/srcWednesday, December 7, 11 56. WPO PracticeWednesday, December 7, 11 57. Wednesday, December 7, 11 58. Wednesday, December 7, 11 59. 3 Wednesday, December 7, 11 60. 52 msWednesday, December 7, 11 61. 30KB 50% 1 Wednesday, December 7, 11 62. 1. 2000 DOM 0.5ms2. JS UI Update JS 1s3.Wednesday, December 7, 11 63. 1. 8K 2. Wednesday, December 7, 11 64. 1. 2. 50KB/s chunked 3. Wednesday, December 7, 11 65. HTML BigPipe Flushed Wednesday, December 7, 11 66. Wednesday, December 7, 11 67. HTML Wednesday, December 7, 11 68. BigPipe BigPipe Facebook BigPipe Wednesday, December 7, 11 69. BigRender - 1.2. JS Wednesday, December 7, 11 70. BigRender S BigRenderWednesday, December 7, 11 71. BigRender DOM Wednesday, December 7, 11 72. DOM HTMLAB HTMLCDWednesday, December 7, 11 73. DOM HTML 1.js 2.3. Raw text elements script style4. RCDATA elements textarea titlehttp://lifesinger.wordpress.com/2011/09/23/bigrender-for-taobao-item/Wednesday, December 7, 11 74. DOM textarea 1. HTML & &2. ETAGO