Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SDCC

Joseph Chiang
September 08, 2012

 SDCC

2012 北京的 SDCC 研讨会讲模块加载策略

Joseph Chiang

September 08, 2012
Tweet

More Decks by Joseph Chiang

Other Decks in Programming

Transcript

  1. ਆρ೘ֹ֥(JU)VCषؿᆀ https://github.com/josephj/github-chinese-developer ᆃՑဆࢃ֥ٓ২۵۽ऎ׻ᄝ҂๝֥#SBODIᇏ <link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet"> <link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet"> <link

    href="assets/stylesheets/demo.css" rel="stylesheet"> <script src="assets/javascripts/jquery-1.8.1.min.js"></script> <script src="assets/javascripts/handlebars-1.0.0.beta.6.js"></script> <script src="assets/javascripts/demo.js"></script> ᆃဢ֥ཬທၩđड़קն҆ٳದ׻൞ᆰࢤࡆᄛଆॶ֥ Bootstrap CSS Bootstrap CSS Page CSS jQuery Handlebars Page JS
  2. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div>

    <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ
  3. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div>

    <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ
  4. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div>

    <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ ၂۱*%սі၂۱ଆॶ ҂ିᇗگ
  5. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div>

    <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ ၂۱*%սі၂۱ଆॶ ҂ିᇗگ IE CE GUսіଆॶ֥ѓ ๨aଽಸaѓແࢲܒ
  6. <div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div

    class=”extra”> ... </div> </div> </div> form .extra [HTML] ၹૄ۱ଆॶ*%׿৫a$44҂߶޺ཌྷ໪ಙ ՎଆॶࢡZLQTC ZLQ൞ཛଢ෪ཿaTC൞4FBSDI#PY֥⅜⇔
  7. <div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div

    class=”extra”> ... </div> </div> </div> form .extra [HTML] <style> #ykpsb { margin-bottom:10px; } #ykpsb form { float:left; } #ykpsb .extra { float:right; } </style> [CSS] ၹૄ۱ଆॶ*%׿৫a$44҂߶޺ཌྷ໪ಙ ՎଆॶࢡZLQTC ZLQ൞ཛଢ෪ཿaTC൞4FBSDI#PY֥⅜⇔
  8. ঺֡෮ิ֥ JavaScript ଆॶଆൔ window.mods[“ykpsb”] = function () { }(); //

    利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理,不会影响其他模块 privateVar = "123"; publicFn = function () {};
  9. ঺֡෮ิ֥ JavaScript ଆॶଆൔ window.mods[“ykpsb”] = function () { }(); //

    利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理,不会影响其他模块 privateVar = "123"; publicFn = function () {}; return { // 仅揭露需公开的方法 publicFn: publicFn };
  10. ঺֡෮ิ֥ JavaScript ଆॶଆൔ window.mods[“ykpsb”] = function () { }(); //

    利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理,不会影响其他模块 privateVar = "123"; publicFn = function () {}; return { // 仅揭露需公开的方法 publicFn: publicFn }; // 外界仅可存取公开方法 mod["ykpsb"].publicFn();
  11. Nicholas Zakas Former Principal Front End Engineer, Yahoo! Zakas֥Scalable JavaScript

    ଆॶ ܴҳᆀଆൔğ ൌቔোර)VCܼѬ۵ࡓ๐ ֥ྛູđղ֞҂൐Ⴈಆთэ ඔॴଆቆ܎๙֥ଢ֥b https://github.com/miiicasa/module
  12. ਆρ೘ֹ֥षؿᆀ 资讯模块 列表模块 _info.php _info.css _info.js _list.php _list.css _list.js 条件过滤模块

    _filter.php _filter.css _filter.js ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ http://josephj.com/lab/2012/github-chinese-develope/
  13. 6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function () {

    function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ
  14. 6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function () {

    function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ ֻؽ۱ҕඔॖၛקၬՎଆॶླေଧུଆॶ
  15. 6006 6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function ()

    { function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ // 使用⼀一个 AMD 模块 require(["editor"], function (Editor) { new Editor(); }); ֻؽ۱ҕඔॖၛקၬՎଆॶླေଧུଆॶ ᄝ൐Ⴈൈၛ׮෿ᄛೆٚൔࡼཌྷܱଆॶ֖σ၂ѩᄛೆ
  16. 3FRVJSF+4൞ଢభቋ୤Я֥".%ൌቔ ॖၛሱ׮၂۱၂۱ᄛೆ၇ঠ֥ଆॶ ࠇؿ҃భ๩ݖSKTቓކѩࠣቋཬ߄ // AMD Module define(“editor”, [‘a’,’b’,’c’], function ()

    { function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); }); ކѩაቋཬ߄ಯಖ߶ႵཌഈԢհ঒଴ა #VJMEൈࡗݖࣲ֥ਆ۱໙ีa മᇀଆॶ၂؟ؓषؿ෎؇္߶ᄯӮԊࠌ 3FRVJSF+4֥ࡏܒၹՎ҂෾ژކ໡֥ླ౰
  17. ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९ ᄪᄝ೘୍భaᄅࣼิԛ֥ଆॶࡏܒ // AMD Module define(‘editor’, [‘a’,’b’,’c’], function () {

    function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); });
  18. ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९ ᄪᄝ೘୍భaᄅࣼิԛ֥ଆॶࡏܒ ۵ಀ୍ҌႵ֥".%a෮ေࢳथଆॶ၇ঠྟ֥නਫ਼൞၂ᇁ֥ // AMD Module define(‘editor’, [‘a’,’b’,’c’], function ()

    { function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); }); // YUI Module YUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; }, “VERSION”, {requires:[‘a’,’b’,’c’]}); YUI.use("editor", function (Y) { new Y.Editor(); });
  19. escape yui (Seed) widget datatable-core base-build datatable-head datatable-body model-list node-event-delegate

    base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')
  20. escape yui (Seed) widget datatable-core base-build datatable-head datatable-body model-list node-event-delegate

    base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view yui-base event-delegate pluginhost event-synthetic attribute-core attribute-events attribute-extras array-extras array-invoke arraylist json-parse model ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')
  21. escape yui (Seed) widget datatable-core base-build datatable-head datatable-body model-list node-event-delegate

    base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view yui-base event-delegate pluginhost event-synthetic attribute-core attribute-events attribute-extras array-extras array-invoke arraylist json-parse model ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable') ൌ࠽ഈdatatable܋Ⴕ64ἠଆॶ֖ླᄛೆ ၂۱၂۱ᄛೆ߶ޓҠིି YUI֥ԩ৘ٚൔູޅĤ
  22. John Resig The creator of jQuery YUI().use() + pulling code

    off of Yahoo's CDN is damn sexy and should be promoted *VERY* heavily. http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc YUIᄛೆٚൔൌᄝ෾SexyਔaႋФն৯๷ܼĆ
  23. ঒଴ؽğ:6*ሱרଆॶቆ෿ഡקگᄖ YUI_config = {"filter":"raw","async":true,"combine":true,"comboBase":"combo/?f=","comboSep":",","root":"lib/yui/ build/","langs":"zh-TW,en-US","groups":{"mui":{"combine":true,"fetchCSS":true,"root":"lib/mui/","lang":["en-US","zh- TW"],"modules":{"platform-core":{"path":"platform/core.js","requires":["node-base","event-base","platform- sandbox"]},"platform-sandbox":{"path":"platform/sandbox.js"},"lang-service":{"path":"platform/lang_service.js","requires": ["platform-core","platform-sandbox","intl"]},"scroll-pagination":{"path":"scroll-pagination/scroll- pagination.js","requires":["event","event-resize","node-event-delegate","datasource","scroll-pagination-css"]},"scroll- pagination-css":{"path":"scroll-pagination/assets/scroll-pagination.css","type":"css"},"shjs":{"path":"shjs/

    sh_php.min.js","requires":["shjs-core","shjs-css"]},"shjs-css":{"path":"shjs/sh_nedit.css","type":"css"},"mui-cssbutton": {"path":"cssbutton/assets/skins/miiicasa/cssbutton-skin.css","type":"css"},"shjs-core":{"path":"shjs/ sh_main.min.js"}}},"index":{"combine":true,"fetchCSS":false,"root":"index/","lang":["en-US","zh-TW"],"modules":{"welcome": {"path":"welcome/welcome.js","lang":["en-US","zh-TW"],"requires":["platform-core","platform-sandbox","lang- service","console"]},"welcome/_notification":{"path":"welcome/_notification.js","requires":["substitute","scroll- pagination","yql","panel","node-event-delegate","handlebars"]},"charming/_masthead":{"path":"charming/ _masthead.js","requires":["panel","shjs"]},"common/_sidebar":{"requires":["mui-cssbutton"]}}}}}; YUI().use("welcome","welcome/_notification","charming/_masthead","common/_sidebar"); ٤:6*Чദ֥ଆॶ֤ਸ਼ຓקၬđ֌ᆃဢ҂ݺົ޹
  24. ਆρ೘ֹ֥षؿᆀ ᆃ߭໡ૌေࡆഈଆॶ၇ঠܱ༢Ć http://josephj.com/lab/2012/github-chinese-develope/ 资讯模块 列表模块 _info.php _info.css _info.js _list.php _list.css

    _list.js 条件过滤模块 _filter.php _filter.css _filter.js module, cookie •module • node-event-delegate • node-style • node-screen • cache • jsonp • handlebars • event-resize •cookie •module • node-base •handlebars
  25. ໃটषؿॖၛປಆህᇿᄝଆॶഈ "๙ᆩ࿟༏ଆॶ (_notification) ଆॶषؿᆀ" #်൮ଆॶ (_masthead) ଆॶषؿᆀ# ଆॶ଀ӫ welcome/_notification $44֖σ

    welcome/_notification.css +4֖σ welcome/_notification.js ཌྷ၇ଆॶ scroll-pagination, node-event-delegate, viewer ଆॶ଀ӫ common/_masthead $44֖σ common/_masthead.css +4֖σ common/_masthead.js ෮ླଆॶ panel, device-navigation
  26. ໃটषؿॖၛປಆህᇿᄝଆॶഈ "๙ᆩ࿟༏ଆॶ (_notification) ଆॶषؿᆀ" #်൮ଆॶ (_masthead) ଆॶषؿᆀ# $ҧшণଆॶ (_sidebar) ଆॶषؿᆀ$

    ଆॶ଀ӫ welcome/_notification $44֖σ welcome/_notification.css +4֖σ welcome/_notification.js ཌྷ၇ଆॶ scroll-pagination, node-event-delegate, viewer ଆॶ଀ӫ common/_masthead $44֖σ common/_masthead.css +4֖σ common/_masthead.js ෮ླଆॶ panel, device-navigation ଆॶ଀ӫ welcome/_sidebar $44֖σ welcome/_sidebar.css +4֖σ ↥ ෮ླଆॶ ↥
  27. ཌྷܱ৵ࢲ c2010ࡹ৫భ؊षؿ๶ؒ IUUQXXXTMJEFTIBSFOFUTEDD cॴଆॶ܎๙ࠏᇅ IUUQHJUIVCDPNNJJJDBTBNPEVMF cMiniࡆᄛ۽ऎ IUUQHJUIVCDPNKPTFQIKNJOJ cଆॶࡆᄛࠏᇅ IUUQHJUIVCDPNKPTFQIKTUBUJDMPBEFS cਆρ೘ֹ֥GitHubषؿᆀ

    IUUQHJUIVCDPNKPTFQIKHJUIVCDIJOFTFEFWFMPQ c໡֥Ѱग़ğᆃဢቓࣼؓਔ IUUQKPTFQIKDPN c໡֥EmailğKPTFQIK!HNBJMDPN 今天看到的所有程式码或工具都是可分享的!