0
JavaScript Autoload  更好的组织你的 JavaScript文件       拔赤 – F2E@Taobao                          2011-08
ongoingprojecthttp://ued.taobao.com/javascript   http://jayli.github.com/jswebapps                                       ...
静态语言  vs动态语言
如何载入外部文件/包?
PHP<?php   inlcude(‘config.php’);   include(‘head.php’);   include(‘sidebar.php’);   include(‘main_content.php’);   Includ...
C++#include   <fstream>#include   <sstream>#include   <time.h>#include   <stdio.h>#include   <string.h>int main(int argc,c...
Pythonimport dump.logimport io.xmlimport io.jsonfrom bean import *From mod1 import *# main logic…
PHP文件依赖            config.php                            sitenav.phpindex.php               header.php     channel.php    ...
JavaScript?<script src=‘core.js’ /><script src=‘dom.js’ /><script src=‘util.js’ /><script src=‘selection.js’ /><script sr...
JavaScript文件依赖 ?              selection.js                                dom.js                                 style.js...
JavaScriptLoaderYUI Loader  http://developer.yahoo.com/yui/3Yepnope.js  http://yepnopejs.comSeaJS  http://seajs.com
YUILoaderhttp://developer.yahoo.com/yui/3
Loader.add({  ‘base’:{      path:’base.js’,      requires:[‘dom’,’node’,’io’]  },  ‘pagination’:{      path:’pagination-v1...
异步载入文件Loader.use(‘pagination’,‘dump’,function(Y){     //main logic…});
Why异步?
function getScript(url,callback){  var el = $.createElement(‘script’);  el.src = url;  el.onload = function(){     callbac...
除了html中的<script>标签JavaScript文件载入都是异步
并行 or串行 ?
并行载入文件getScritp(‘file1.js’);getScript(‘file2.js’);getScript(‘file3.js’);…//main logic ?
串行载入文件getScritp(‘file1.js’,function(){  getScript(‘file2.js’,function(){      …      getScript(‘fileN.js’,function(){     ...
可以这样串行!getScritp(  ‘file1.js’,  ‘file2.js’,  ‘file3.js’,…  function(){     //main logic…  });
Yepnope.jshttp://yepnopejs.com
Yepnope.js串行载入文件yepnope([{  load:[’file1.js’,’file2.js’]  complete:function(){     //main logic…  }}]);
有条件载入文件?
PHP<?php   if(condition1){      include(‘file1.php’);   } else if (condition2){      include(‘file2.php’);   } else {     ...
Yepnope.jsyepnope([{  test:condition,  yep:’file1.js’, // condition == true  nope:’file2.js’,// condition == false  comple...
任意条件if(condition1){  getScript(‘file1.js’,foo);}else if(condition2){  getScript(‘file2.js’,foo);}else{  getScript(‘file3.j...
可不可以不写回调?
CommonJShttp://www.commonjs.org
CommonJShttp://www.commonjs.org
CommonJS ∈ServerSide JS   define(function(require){     require(‘./mod1’); //阻塞式载入     require(‘./mod2’); //阻塞式载入     //m...
CommonJS ∈Client SideJS?
SeaJShttp://seajs.com
SeaJS Demo- Calculator   http://seajs.com/docs/demo/calculator/
JavaScript文件依赖                      jquery.js           stdin.js                      calculate.jsinit.js                ...
init.jsdefine(function(require){     require(‘./stdin’); //输入的逻辑     require(‘./stdout’); //输出的逻辑});             stdin.jsd...
JavaScript加载过程
闭包的重要性http://seajs.com/docs/commonjs-modules.html#why-wrapped
SeaJS 伪阻塞 (init.js)define(function(require){     return;     require(‘./mod1’);     require(‘./mod2’);});
WhateverGoodIdea!
GoodIdea!•   串行加载JavaScript文件•   统一的沙箱结构•   对沙箱逻辑的“预解析”•   动态加载JavaScript文件
降低 JS文件之间的耦合
Problem!
define(function(require){     require(‘./dom’); //必须手动引入文件?     DOM.get(‘#id’);});    使用某个类的前提是 必须知道它所在的模块/文件名称!   并手动载入模块...
Iwantthis!define(function(require){     require(‘./dom’);      //知道了方法名,何必再需知道文件名?      DOM.get(‘#id’);});
CommonJS文件名 =>命名空间
PHPautoloadhttp://cn.php.net/__autoload
<?php  function __autoload($class_name) {     if($class_name == ‘MyClass1’){           require_once(‘MyClass1.php’);      ...
Sandbox.JShttps://github.com/jayli/sandbox
autoload mapfunction __autoload() {  return {     S.Carousel:carousel.js,     S.ColorPicker:colorpicker-v1.js,     S.Edito...
SandboxJS Demo- autoloadhttp://jayli.github.com/sandbox/examples/autoload/test/mojo.html
<script src=“种子文件.js & 配置文件.js” /><script>Sandbox.ready(function(S){  // 旋转木马模块  S.Carousel.init(‘bid’); //选择颜色模块 S.ColorP...
JavaScriptAutoload•   代码解耦更充分•   开发者记忆负担最低•   免除基础库升级更改文件名的麻烦•   享受动态语言编程•   …
Ok,开始享受编程?
Warning !!!
JavaScriptAutoload 的不足 •   串行加载JS- 速度是个问题 •   伪阻塞 - 客户端无“真”阻塞 •   对包装器的支持不好(Wrap(dom)) •   对链式调用支持不好
适用 JavaScriptAutoload 的场景    •   内部系统 – 对性能要求不高    •   ServerSideJavaScript    •   当你想要更纯粹的编程时    •   …
优化JS加载器的手段    SeaJS - spmYUI3 - configuratorCDN - Combo Handler
Enjoyit,Justforfun~
refhttp://developer.yahoo.com/yui/3http://yepnopejs.comhttp://seajs.comhttps://github.com/seajs/spmhttps://github.com/jayl...
@jayli       F2E & Translatorhtt[p://jayli.github.com      bachi@taobao.com
Javascript autoload
Upcoming SlideShare
Loading in...5
×

Javascript autoload

3,991

Published on

Published in: Technology
2 Comments
21 Likes
Statistics
Notes
  • 顶一个,也很喜欢你那个关于编码的分享。。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 分析得很深入呢
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,991
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
196
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript autoload"

  1. 1. JavaScript Autoload 更好的组织你的 JavaScript文件 拔赤 – F2E@Taobao 2011-08
  2. 2. ongoingprojecthttp://ued.taobao.com/javascript http://jayli.github.com/jswebapps @jayli F2E & Translator htt[p://jayli.github.com bachi@taobao.com
  3. 3. 静态语言 vs动态语言
  4. 4. 如何载入外部文件/包?
  5. 5. PHP<?php inlcude(‘config.php’); include(‘head.php’); include(‘sidebar.php’); include(‘main_content.php’); Include(‘sth_section.php’); //other logic?>
  6. 6. C++#include <fstream>#include <sstream>#include <time.h>#include <stdio.h>#include <string.h>int main(int argc,char **argv){ //main logic…}
  7. 7. Pythonimport dump.logimport io.xmlimport io.jsonfrom bean import *From mod1 import *# main logic…
  8. 8. PHP文件依赖 config.php sitenav.phpindex.php header.php channel.php content.php section.php
  9. 9. JavaScript?<script src=‘core.js’ /><script src=‘dom.js’ /><script src=‘util.js’ /><script src=‘selection.js’ /><script src=‘editor.js’ /><script> //main logic…</script>
  10. 10. JavaScript文件依赖 ? selection.js dom.js style.jseditor.js plugin.js event.js editor‐util.js core.js browser.js
  11. 11. JavaScriptLoaderYUI Loader http://developer.yahoo.com/yui/3Yepnope.js http://yepnopejs.comSeaJS http://seajs.com
  12. 12. YUILoaderhttp://developer.yahoo.com/yui/3
  13. 13. Loader.add({ ‘base’:{ path:’base.js’, requires:[‘dom’,’node’,’io’] }, ‘pagination’:{ path:’pagination-v121.js’, requires:[‘page-skin’,’node’,’base’] } //…});
  14. 14. 异步载入文件Loader.use(‘pagination’,‘dump’,function(Y){ //main logic…});
  15. 15. Why异步?
  16. 16. function getScript(url,callback){ var el = $.createElement(‘script’); el.src = url; el.onload = function(){ callback(); }; document.head.appendChild(el);}
  17. 17. 除了html中的<script>标签JavaScript文件载入都是异步
  18. 18. 并行 or串行 ?
  19. 19. 并行载入文件getScritp(‘file1.js’);getScript(‘file2.js’);getScript(‘file3.js’);…//main logic ?
  20. 20. 串行载入文件getScritp(‘file1.js’,function(){ getScript(‘file2.js’,function(){ … getScript(‘fileN.js’,function(){ //main logic… }); });});
  21. 21. 可以这样串行!getScritp( ‘file1.js’, ‘file2.js’, ‘file3.js’,… function(){ //main logic… });
  22. 22. Yepnope.jshttp://yepnopejs.com
  23. 23. Yepnope.js串行载入文件yepnope([{ load:[’file1.js’,’file2.js’] complete:function(){ //main logic… }}]);
  24. 24. 有条件载入文件?
  25. 25. PHP<?php if(condition1){ include(‘file1.php’); } else if (condition2){ include(‘file2.php’); } else { include(‘file3.php’); } //main logic…?>
  26. 26. Yepnope.jsyepnope([{ test:condition, yep:’file1.js’, // condition == true nope:’file2.js’,// condition == false complete:function(){ //main logic… }}]);
  27. 27. 任意条件if(condition1){ getScript(‘file1.js’,foo);}else if(condition2){ getScript(‘file2.js’,foo);}else{ getScript(‘file3.js’,foo);}function foo(){ //主逻辑必须写入回调中 //main logic…}
  28. 28. 可不可以不写回调?
  29. 29. CommonJShttp://www.commonjs.org
  30. 30. CommonJShttp://www.commonjs.org
  31. 31. CommonJS ∈ServerSide JS define(function(require){ require(‘./mod1’); //阻塞式载入 require(‘./mod2’); //阻塞式载入 //main logic… });
  32. 32. CommonJS ∈Client SideJS?
  33. 33. SeaJShttp://seajs.com
  34. 34. SeaJS Demo- Calculator http://seajs.com/docs/demo/calculator/
  35. 35. JavaScript文件依赖 jquery.js stdin.js calculate.jsinit.js math.js stdout.js
  36. 36. init.jsdefine(function(require){ require(‘./stdin’); //输入的逻辑 require(‘./stdout’); //输出的逻辑}); stdin.jsdefine(function(require){ require(‘./jquery’); //载入jQuery require(‘./calculator’); //计算器的逻辑});
  37. 37. JavaScript加载过程
  38. 38. 闭包的重要性http://seajs.com/docs/commonjs-modules.html#why-wrapped
  39. 39. SeaJS 伪阻塞 (init.js)define(function(require){ return; require(‘./mod1’); require(‘./mod2’);});
  40. 40. WhateverGoodIdea!
  41. 41. GoodIdea!• 串行加载JavaScript文件• 统一的沙箱结构• 对沙箱逻辑的“预解析”• 动态加载JavaScript文件
  42. 42. 降低 JS文件之间的耦合
  43. 43. Problem!
  44. 44. define(function(require){ require(‘./dom’); //必须手动引入文件? DOM.get(‘#id’);}); 使用某个类的前提是 必须知道它所在的模块/文件名称! 并手动载入模块/文件!
  45. 45. Iwantthis!define(function(require){ require(‘./dom’); //知道了方法名,何必再需知道文件名? DOM.get(‘#id’);});
  46. 46. CommonJS文件名 =>命名空间
  47. 47. PHPautoloadhttp://cn.php.net/__autoload
  48. 48. <?php function __autoload($class_name) { if($class_name == ‘MyClass1’){ require_once(‘MyClass1.php’); }else if($class_name == ‘MyClass2’){ require_once(‘MC2_v102.php’); } } $obj = new MyClass1(); $obj2 = new MyClass2();?>
  49. 49. Sandbox.JShttps://github.com/jayli/sandbox
  50. 50. autoload mapfunction __autoload() { return { S.Carousel:carousel.js, S.ColorPicker:colorpicker-v1.js, S.Editor:article.js };}
  51. 51. SandboxJS Demo- autoloadhttp://jayli.github.com/sandbox/examples/autoload/test/mojo.html
  52. 52. <script src=“种子文件.js & 配置文件.js” /><script>Sandbox.ready(function(S){ // 旋转木马模块 S.Carousel.init(‘bid’); //选择颜色模块 S.ColorPicker(‘cid’); //编辑器 S.Editor(‘eid’,淘宝UED);});</script>
  53. 53. JavaScriptAutoload• 代码解耦更充分• 开发者记忆负担最低• 免除基础库升级更改文件名的麻烦• 享受动态语言编程• …
  54. 54. Ok,开始享受编程?
  55. 55. Warning !!!
  56. 56. JavaScriptAutoload 的不足 • 串行加载JS- 速度是个问题 • 伪阻塞 - 客户端无“真”阻塞 • 对包装器的支持不好(Wrap(dom)) • 对链式调用支持不好
  57. 57. 适用 JavaScriptAutoload 的场景 • 内部系统 – 对性能要求不高 • ServerSideJavaScript • 当你想要更纯粹的编程时 • …
  58. 58. 优化JS加载器的手段 SeaJS - spmYUI3 - configuratorCDN - Combo Handler
  59. 59. Enjoyit,Justforfun~
  60. 60. refhttp://developer.yahoo.com/yui/3http://yepnopejs.comhttp://seajs.comhttps://github.com/seajs/spmhttps://github.com/jayli/sandboxhttp://www.commonjs.orghttp://cn.php.net/__autoload
  61. 61. @jayli F2E & Translatorhtt[p://jayli.github.com bachi@taobao.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×