Your SlideShare is downloading. ×
0
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Javascript autoload
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript autoload

3,969

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,969
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
194
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

×