SeaJS-Velocity

SeaJS前端模块化开发探索与网站性能优化实践玉伯  -­‐  淘宝网  -­‐  Velocity2011.12Wednesday,December7,11关于我王保平  /  Frank  Wang  /  [e-mail]:  @lifesingerBlog:  新浪微博：@玉伯也叫射雕Fortran,  C,  .NET,  Java,  JavaScript,  NodeJS用开放的心态，打造专业的人生。Wednesday,December7,11大纲遇到的问题设计目标用法与示例内部设计网站性能优化实践总结Wednesday,December7,11遇到的问题The  ProblemsWednesday,December7,11近8000行的单文件2010年9月淘宝商品详情页Wednesday,December7,11scripttype=text/javascriptsrc==/itoolbar/plugins/jquery-1.6.2.js|/itoolbar/core/passport.js|/itoolbar/core/base64.js|/itoolbar/core/jquery.cookie.js|/itoolbar/jquery.itoolbar.index.js&t=js&c=utf-8charset=utf-8/scriptview-­‐source:年12月搜狐首页Wednesday,December7,112011年12月淘宝首页繁重的配置Wednesday,December7,11YUI3  的命名空间困局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”？varrequest=Y.io(...);});Wednesday,December7,11版本“锁定”的苦恼scriptsrc=””/scriptscriptsrc=””/scriptscriptsrc=””/script2011年12月淘宝CMS系统YUI  2.7.0KISSY  1.0.8旧有代码多升级代价大+版本冲突资源不够时间紧张...=决定在旧版本上继续开发依赖旧版本的代码更多Wednesday,December7,11“在线”开发与调试#/etc/hosts127.0.0.1a.tbcdn.cnJSlideWillowWednesday,December7,11QueryString.parse(‘a=b&b=c’);//={a:‘b’,b:‘c’}QueryString.stringify({‘foo’:‘bar’});//=‘foo=bar’querystring.js如何跨环境共享通用模块？Wednesday,December7,11遇到的问题小结单文件过大，维护成本高，有损性能同步阻塞式加载，影响网站打开速度异步无阻加载的配置过重，维护不便命名空间的记忆负担与潜在冲突类库升级成本等因素导致版本“锁定”开发、部署与上线后的  bug  fix  不够便捷跨环境开发的通用模块共享问题Wednesday,December7,11设计目标Design  GoalsWednesday,December7,11JavaScript  developmentneeds  to  be  done  differently.Wednesday,December7,11设计目标⼀一个模块⼀一个文件a_very_big_file.jsmodule_a.jsmodule_b.jsmodule_c.jsmodule_d.js...Wednesday,December7,11设计目标高性能：异步  +  并行Wednesday,December7,11设计目标使用简单：自动管理依赖  +  约定优于配置FP.add({'fp-mods':{fullpath:'}});//inmodule_a.js:require(‘path/to/module_x’);//inhtmlpage:seajs.use(‘path/to/main’);//indeployment:$spmbuildmain.js--combineWednesday,December7,11设计目标可维护性：无命名空间冲突  +  多版本共存varE=YAHOO.util.Event;varDesc=TB.Detail.Desc;//inmodule_x.js:varE=require(‘./event’);varDesc=require(‘./desc’);//inmodule_x.js:varjq12=require(‘jquery/1.2.6/jquery’);varjq17=require(‘jquery/1.7.1/jquery’);scriptsrc=”jquery-1.2.6.js”scriptsrc=”jquery-1.7.1.js”scriptvarjq17=$.noConflict(true);/scriptWednesday,December7,11设计目标弱依赖：浏览器即服务器sudo  vi  /etc/hostsUCool...Wednesday,December7,11设计目标跨环境：通用模块只需编写⼀一次//inhtmlpage:scriptsrc=”sea.js”data-main=”./init”/script//ininit.js:varQS=require(‘querystring’);//innodeenvironment:$nodeinit.js//ininit.js:require(‘seajs’);varQS=require(‘querystring’);Wednesday,December7,11设计目标稳定可靠：失败率和传统方式在⼀一个量级可扩展性：通过插件可满足自定义需求Wednesday,December7,11SeaJS  is  a  Module  Loader  for  the  Web.Wednesday,December7,11://seajs.comWednesday,December7,11用法与示例Usage  and  Examples(  using  seajs  1.1.0)Wednesday,December7,11安装1.安装  node:  ­‐v0.6.4.msi2.安装  spm:  $  npm  install  spm  -­‐g3.下载  seajs:  $  spm  install  seajsWednesday,December7,11define(function(){alert(‘Hello,world!’);});init.js:test.html:scriptsrc=”libs/seajs/1.1.0/sea.js”/scriptscriptseajs.use(‘./init’);/script⼀一个模块⼀一个文件使用  define  定义模块使用  use  异步加载模块示例：基本用法Wednesday,December7,11define(function(require,exports){exports.message=‘Hello,world!’;});init.js:test.html:scriptsrc=”libs/seajs/1.1.0/sea.js”/scriptscriptseajs.use(‘./init’,function(init){alert(init.message);});/script使用  exports  对外提供接口使用  use  的回调函数获取加载的模块对象示例：基本用法Wednesday,December7,11define(function(require,exports){varweather=require(‘./weather’);vartemperature=weather.getTemperature(‘Beijing’);exports.message=‘ThetemperatureofBeijingis’+temperature;});init.js:使用  require  获取其他模块对象自动处理依赖关注点分离：直接依赖的模块  +  向外提供的接口weather.js:define(function(require,exports){vario=require(‘./io’);...exports.getTemperature=function(city){...};});示例：基本用法Wednesday,December7,11示例：基本用法define(function(require,exports,module){vara=require(‘./a’);require.async(‘./b’,function(b){...});exports.x=...;});­‐cn/module-­‐definition.htmlWednesday,December7,11示例：transport(function(){if(typeofABC===‘undefined’){ABC={};}ABC.doSth=function(){...};ABC.someMember=...;})();abc.js:define(function(require,exports){varABC=exports;ABC.doSth=function(){...};ABC.someMember=...;});Wednesday,December7,11示例：transport/***@package*@src