Javascript autoload
21 likes2,228 views
本文档介绍了JavaScript文件的自动加载和组织方法，包括异步和串行加载的比较、条件加载的实现以及CommonJS规范的应用。同时，文档还讨论了使用JavaScript autoload的优势和不足之处。最后，提供了一些优化JavaScript加载器的建议和相关资源链接。
![Loader.add({
‘base’:{
path:’base.js’,
requires:[‘dom’,’node’,’io’]
},
‘pagination’:{
path:’pagination-v121.js’,
requires:[‘page-skin’,’node’,’base’]
}
//…
});](https://image.slidesharecdn.com/javascriptautoload-110713211423-phpapp01/85/Javascript-autoload-14-320.jpg)
![Yepnope.js串行载入文件
yepnope([{
load:[’file1.js’,’file2.js’]
complete:function(){
//main logic…
}
}]);](https://image.slidesharecdn.com/javascriptautoload-110713211423-phpapp01/85/Javascript-autoload-24-320.jpg)
![Yepnope.js
yepnope([{
test:condition,
yep:’file1.js’, // condition == true
nope:’file2.js’,// condition == false
complete:function(){
//main logic…
}
}]);](https://image.slidesharecdn.com/javascriptautoload-110713211423-phpapp01/85/Javascript-autoload-27-320.jpg)
Javascript autoload
- 1. JavaScript Autoload 更好的组织你的 JavaScript文件 拔赤 – F2E@Taobao 2011-08
- 2. ongoingproject http://ued.taobao.com/javascript http://jayli.github.com/jswebapps @jayli F2E & Translator htt[p://jayli.github.com bachi@taobao.com
- 4. 静态语言 vs 动态语言
- 5. 如何载入外部文件/包？
- 6. PHP <?php inlcude(‘config.php’); include(‘head.php’); include(‘sidebar.php’); include(‘main_content.php’); Include(‘sth_section.php’); //other logic ?>
- 7. C++ #include <fstream> #include <sstream> #include <time.h> #include <stdio.h> #include <string.h> int main(int argc,char **argv){ //main logic… }
- 8. Python import dump.log import io.xml import io.json from bean import * From mod1 import * # main logic…
- 9. PHP文件依赖 config.php sitenav.php index.php header.php channel.php content.php section.php
- 10. 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>
- 11. JavaScript文件依赖 ？ selection.js dom.js style.js editor.js plugin.js event.js editor‐util.js core.js browser.js
- 12. JavaScriptLoader YUI Loader http://developer.yahoo.com/yui/3 Yepnope.js http://yepnopejs.com SeaJS http://seajs.com
- 14. Loader.add({ ‘base’:{ path:’base.js’, requires:[‘dom’,’node’,’io’] }, ‘pagination’:{ path:’pagination-v121.js’, requires:[‘page-skin’,’node’,’base’] } //… });
- 15. 异步载入文件 Loader.use(‘pagination’,‘dump’,function(Y){ //main logic… });
- 16. Why异步？
- 17. function getScript(url,callback){ var el = $.createElement(‘script’); el.src = url; el.onload = function(){ callback(); }; document.head.appendChild(el); }
- 19. 并行 or串行 ？
- 21. 串行载入文件 getScritp(‘file1.js’,function(){ getScript(‘file2.js’,function(){ … getScript(‘fileN.js’,function(){ //main logic… }); }); });
- 22. 可以这样串行！ getScritp( ‘file1.js’, ‘file2.js’, ‘file3.js’,… function(){ //main logic… } );
- 24. Yepnope.js串行载入文件 yepnope([{ load:[’file1.js’,’file2.js’] complete:function(){ //main logic… } }]);
- 25. 有条件载入文件？
- 26. PHP <?php if(condition1){ include(‘file1.php’); } else if (condition2){ include(‘file2.php’); } else { include(‘file3.php’); } //main logic… ?>
- 27. Yepnope.js yepnope([{ test:condition, yep:’file1.js’, // condition == true nope:’file2.js’,// condition == false complete:function(){ //main logic… } }]);
- 28. 任意条件 if(condition1){ getScript(‘file1.js’,foo); }else if(condition2){ getScript(‘file2.js’,foo); }else{ getScript(‘file3.js’,foo); } function foo(){ //主逻辑必须写入回调中 //main logic… }
- 29. 可不可以不写回调？
- 32. CommonJS ∈ServerSide JS define(function(require){ require(‘./mod1’); //阻塞式载入 require(‘./mod2’); //阻塞式载入 //main logic… });
- 35. SeaJS Demo- Calculator http://seajs.com/docs/demo/calculator/
- 36. JavaScript文件依赖 jquery.js stdin.js calculate.js init.js math.js stdout.js
- 37. init.js define(function(require){ require(‘./stdin’); //输入的逻辑 require(‘./stdout’); //输出的逻辑 }); stdin.js define(function(require){ require(‘./jquery’); //载入jQuery require(‘./calculator’); //计算器的逻辑 });
- 38. JavaScript加载过程
- 40. SeaJS 伪阻塞 (init.js) define(function(require){ return; require(‘./mod1’); require(‘./mod2’); });
- 42. GoodIdea! • 串行加载JavaScript文件 • 统一的沙箱结构 • 对沙箱逻辑的“预解析” • 动态加载JavaScript文件
- 43. 降低 JS文件之间的耦合
- 44. Problem！
- 45. define(function(require){ require(‘./dom’); //必须手动引入文件？ DOM.get(‘#id’); }); 使用某个类的前提是 必须知道它所在的模块/文件名称！ 并手动载入模块/文件！
- 46. Iwantthis! define(function(require){ require(‘./dom’); //知道了方法名，何必再需知道文件名？ DOM.get(‘#id’); });
- 49. <?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(); ?>
- 51. autoload map function __autoload() { return { 'S.Carousel':'carousel.js', 'S.ColorPicker':'colorpicker-v1.js', 'S.Editor':'article.js' }; }
- 53. <script src=“种子文件.js & 配置文件.js” /> <script> Sandbox.ready(function(S){ // 旋转木马模块 S.Carousel.init(‘bid’); //选择颜色模块 S.ColorPicker(‘cid’); //编辑器 S.Editor(‘eid’,'淘宝UED'); }); </script>
- 54. JavaScriptAutoload • 代码解耦更充分 • 开发者记忆负担最低 • 免除基础库升级更改文件名的麻烦 • 享受动态语言编程 • …
- 55. Ok，开始享受编程？
- 56. Warning !!!
- 57. JavaScriptAutoload 的不足 • 串行加载JS- 速度是个问题 • 伪阻塞 - 客户端无“真”阻塞 • 对包装器的支持不好（Wrap(dom)） • 对链式调用支持不好
- 58. 适用 JavaScriptAutoload 的场景 • 内部系统 – 对性能要求不高 • ServerSideJavaScript • 当你想要更纯粹的编程时 • …
- 59. 优化JS加载器的手段 SeaJS - spm YUI3 - configurator CDN - Combo Handler
- 62. @jayli F2E & Translator htt[p://jayli.github.com bachi@taobao.com