Javascript autoload

  • 3,785 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 顶一个,也很喜欢你那个关于编码的分享。。
    Are you sure you want to
    Your message goes here
  • 分析得很深入呢
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,785
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
186
Comments
2
Likes
21

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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