Getting Started with RequireJS

社内勉強会で利用した資料から、いろいろ調整したりしてうｐ

Transcript

1. (FUUJOH
   4UBSUFE 3FRVJSF+4 ࣾ಺ษڧձ
    1
2. !BIPNV IUUQBIPNV 2
3. 1SPCMFNT .PEVMBS
   +BWB4DSJQU $BTF
   4UVEZ )BOET0O 3
4. ✓
   +BWB4DSJQU
   ॻ͍ͯΔͻͱ޲͚ ✓
   खΛಈ͔͢ΩοΧέΛͭ͘Ζ͏ ✓
   ࣮ྫ·͑ͯ͡ɺ಺༰΍͞͠Ί 4
5. 1SPCMFNT தن໛Ҏ্ͷ+BWB4DSJQUΛ؅ཧ͢Δ্Ͱͷ໰୊ 5
6. 6 Bad Context Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS
7. 7 Good Context Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS
8. 8 Dependencies Plugins Libs of choice jQuery Backbone Your Code source. Dependency Management with RequireJS
9. $PNNPO
   JTTVFT 9  ΘΕΘΕͷѻ͏ίʔυ͸๲େͰ͋Δ  ݸʑͷίʔυ͸ཻ౓ΛͦΖ͍͑ͨ  ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠  ґଘؔ܎Λ੔ཧ͍ͨ͠  ͳΜͱ͔͍ͨ͠
10. .PEVMBS +BWB4DSJQU 10 Ϟδϡϥʔͳ+BWB4DSJQUͰ͋Δ͜ͱͷ͓͞Β͍
11. &YBNQMFT 11
12. FH
    5)&
    #*(
    0/& (function() { var Application = { foo: function() {...}, bar: function() {...} }; // long historical stacking code... new Application(); })(); 12 ߦ௒͑ͨ͋ͨΓͰڰؾ ࡍݶͳ͘ॏ͘ͳΔΤσΟλ
13. FH
    /BNFTQBDF
     13 // main.js window.NS = {}; // page.js window.NS.Page = { initialize: function() {}, getContent: function() {}, render : function() {} }; // util.js window.NS.Util = {};
14. FH
    /BNFTQBDF
     // first <script src=”js/main.js”></script> <script src=”js/util.js”></script> <script src=”js/page.js”></script> 14 Α͘෼ׂ͞ΕͯΔΑ͏ʹݟ͑Δ
15. FH
    /BNFTQBDF
     // finally <script src=”js/main.js”></script> <script src=”js/util.js”></script> <script src=”js/module_1.js”></script> <script src=”js/module_6.js”></script> <script src=”js/module_5.js”></script> <script src=”js/module_2.js”></script> <script src=”js/module_3.js”></script> <script src=”js/module_4.js”></script> <script src=”js/module_7.js”></script> <script src=”js/page.js”></script> 15 ಡΈࠐΈॱͱ͍͏໊ͷґଘੑ஍ࠈ ͍ͯ͏͔खॻ͖ϜϦ
16. 3FRVJSF+4 16 ࡴെͱͨ͠ґଘղܾ஍ࠈʹࢀ্ ʋcɾ㱼ɾcϊ
17. AEFpOFA /** * @method define * * @param {String} [id] * @param {Array} dependencies * @param {Function} factory */ define(id, dependencies, factory); 17
18. +BWB4DSJQU
    
    QBHFKT
    // page.js (depend moduleA & Util) define(['moduleA', 'util'], function(moduleA, Util) { function Page($elm) { this.$elm = $elm Util.greatFunction(); } Page.prototype.render = function() { return this.$elm.html(moduleA.getContent()); } return Page; }); 18
19. +BWB4DSJQU
    
    NBJOKT
    // main.js define(['jquery', 'page'], function($, Page) { // initialize new Page($('#container')); // some business Page.render(); }); 19
20. )5.- <!-- Simple! --> <script data-main="main" src="require.js"> </script> 20 ໰୊͸ղܾ͞Εͨʂ <!-- Same code --> <script src="require.js"></script> <script> require(['main'], function(Main) { }); </script>
21. IUUQSFRVJSFKTPSHEPDTXIZBNEIUNM
22. ".%  "TZODISPOPVT
    .PEVMF
    %FpOJUJPO  ґଘఆٛͷղܾ
    XJUI
    ඇಉظϩʔμʔ  )5.-͸γϯϓϧʹఆٛͯ͠ࡁ·͢  1$؀ڥ޲͚ͳΒɺ".%ͷ··Ͱ΋ྑͦ͞͏ 22
23. (JWFO
    CFOFpUT  3FRVJSF+4
    ͸ඇৗʹݡ͍  ґଘղܾ͕γϯϓϧʹͳΔ  EFpOF
    Λར༻ͨ͠ύλʔϯ͕ڧ੍͞ΕΔ  ίʔσΟϯάύλʔϯͷ౷੍͕औΓ΍͍͢  ϞδϡϥʔͰ͋Δ͜ͱΛҙࣝ͠΍͘͢ͳΔ 23
24. $BTF
    4UVEZ 24 ։ൃதϓϩδΣΫτతͳࣄྫ঺հ
25. 6TJOH
    MJCSBSJFT 25  3FRVJSF+4  #BDLCPOFKT  MPEBTI  ;FQUP  +BTNJOF
    
    4JOPO
    
    $PGGFF
    
    5FTUFN
26. 5PVS  #BDLCPOF
    ஍ࠈʢϑΝΠϧ͘Β͍ʣ  +BTNJOF
    ͷ͋ͨΓ  (SVOU
    Ͱ͔ͨΊͯΔͱ͜Ζ  %FWFM  #VJME 26
27. 5)&
    #*(
    0/&
    "("*/  1SPEVDUJPOͰ͸ϑΝΠϧʹ͍ͨ͠ΑͶ  )551ϦΫΤετ͕গͳ͍ͷ͸ྑ͍͜ͱͩ  AHSVOUSFRVJSFKTAͰɺͻͱ·ͱΊʹग़ྗ  ͍ͭͰʹ
    6HMJGZ+4
    Ͱ
    PQUJNJ[F 27
28. %J⒎FSFODF
    GSPN
    DPODBU  খʙதن໛Ͱ͋Ε͹DPODBUͰྑ͍͔ͳɺͱ  γϯϓϧͩ͠  ͕ɺDPODBU͸ґଘੑΛࣔͤͳ͍  ͕ɺDPODBU͸࠶ར༻ੑΛαϙʔτ͠ͳ͍  ͳͥͳΒɺԿͷύλʔϯ΋ఏࣔ͠ͳ͍͔Β 28
29. 4FFNT
    MJLF
    HPPE 29 ґଘΛҙࣝ͢Δྑ͍श׳ ݟ௨͠΋ྑ͘ͳΔ
30. %FFQ
    EFQFOEFODJFT 30 ͕ɺ஖ᥨͷ૥Λݟͯෆ҆ʹͳΔ
31. $BMM
    TUBDL
    )FMM 31
32. 6NN 32  ·͋ɺؾʹ͠ͳ͍͜ͱʹͨ͠  ;FQUP
    ΍
    6OEFSTDPSF
    
    MPEBTI
    
    ͷΑ͏ʹ HMPCBM
    ʹ
    FYQPSU
    ͢ΔౕΒ͸αϘͬͨ  ςετपΓ͸΋͏ͪΐ͍ɺͲ͏ʹ͔͍ͨ͠
33. )BOET0O ϒϥ΢β".%
    ˍ
    SKT
    0QUJNJ[F 33
34. "HFOEB  ϒϥ΢β্Ͱ͍ΘΏΔ".%  SFRVJSFKTDPOpH
    ͢Δ  SKT
    Ͱ
    PQUJNJ[F  BMNPOE
    ʹࠩ͠ସ͑ͯ  HSVOUSFRVJSFKT
    ͯ͠ΈΔʢ͍͚Δ͔ʁʣ 34
35. %PDVNFOUT  IUUQSFRVJSFKTPSHEPDTTUBSUIUNM  IUUQSFRVJSFKTPSHEPDTFSSPSTIUNM  IUUQTHJUIVCDPNKSCVSLFSKTCMPC NBTUFSCVJMEFYBNQMFCVJMEKT  IUUQTHJUIVCDPNKSCVSLFBMNPOE 35
36. 5SZ
    ".%
    4UFQT  KTNBJOKT
    ͷதͰɺEFpOF
    ͯ͠ΈΔ  EBUBNBJO
    ͰಡΜͰΈΔ  KTTVCKT
    ΋
    EFpOF
    ͯ͠ΈΔ  KTNBJOKT
    Λ
    KTTVCKT
    ʹґଘͤ͞Δ 36
37. $POpHVSBUJPO
    4UFQT  SFRVJSFKTDPOpH
    Ͱ
    CBTF6SM
    ͢Δ  KTMJC KT
    Λ
    QBUIT
    ͢Δ  TIJN
    ͢Δ 37
38. *OTUBMM
    SKT # άϩʔόϧʹΠϯετʔϧ % npm install -g requirejs # ύε͕௨͍ͬͯΕ͹ɺr.js͕ར༻ՄೳʹͳΔ % r.js See https://github.com/jrburke/r.js for usage 38
39. 6TJOH
    SKT % r.js -o out=js/all.js\ baseUrl=js\ name=bootstrap\ mainConfigFile=js/bootstrap.js # mainConfigFileʹؚ·ΕΔbaseUrl͸ɺ # ࢦఆϑΝΠϧ͔Βͷ૬ରʹͳͬͯ͠·͏ͷͰɺ # ΦϓγϣϯͰࢦఆ͢Δ΄͏͕Α͍ 39
40. "MNPOE % r.js -o out=js/all.js\ baseUrl=js\ name=lib/almond\ include=bootstrap\ mainConfigFile=js/bootstrap.js # ඇಉظϩʔυॲཧͳͲɺෆཁͳػೳΛআ͍ͨshim # 1ϑΝΠϧʹ·ͱΊΔ͜ͱ # ґଘϞδϡʔϧ໊Λಈతʹࢦఆ͠ͳ͍͜ͱ 40
41. HSVOUSFRVJSFKT % npm install -g grunt % npm link % grunt requirejs 41
42. define(['backbone'], function(Backbone) { return Backbone.Model.extend({ url: 'path/to', defaults: { foo: 'bar' }, validation: { // ... } }); // ऄ଍ newͨ͠ͷΛreturn͢ΔͱsingletonΆ͍ }); 42 "QQFOEJY
    XJUI
    #BDLCPOF
43. "QQFOEJY
    XJUI
    +BTNJOF // SpecRunner.html require(['spec/util', 'spec/main'], function() { var env = jasmine.getEnv(); env.addReporter(new jasmine.HtmlReporter); env.execute(); }); // spec.coffee define ['util'], (Util)-> describe 'Commmon Utilities', -> util = null beforeEach -> util = new Util it 'Should `plzTruthy` returns true', -> expect(Util.plzTruthy()).toBe true 43
44. "QQFOEJY
    &YJTUJOH
    .PEVMF // ͨͱ͑͹ Zepto ($) // `define`͕ఆٛ͞Ε͍ͯͯɺAMDΆ͔ͬͨΒ... if (typeof define === 'function' && define.amd) { define([], function() { return Zepto; }); } 44
45. "QQFOEJY
    $PNNPO+4
    4VHBS define(function(require) { var hoge = require('hoge'), fuga = require('fuga'), piyo = require('piyo'); return { hogehoge: hoge.toString(), fugafuga: fuga.toString(), piyopiyo: piyo.toString() } }); 45
46. "QQFOEJY
    NBEHF # https://github.com/pahen/node-madge % npm install -g madge % brew install graphviz # Ϟδϡʔϧͷґଘؔ܎ΛՄࢹԽ % madge --image out.png --format amd ./app 46
47. $PODMVTJPO  3FRVJSF+4͸ϥΠϒϥϦͰ͋Γͭͭɹɹɹɹ ґଘղܾ͢ΔͨΊͷϞμϯύλʔϯͦͷ΋ͷ  ΂ͨॻ͖ͷ
    +4
    ͔Βɺૄ݁߹ͳ
    +4
    ʹ  ूஂ։ൃ΍௕ظϦϑΝΫλϦϯάΛݟӽͯ͠ ಋೖ͢Δͱɺ͞ΒʹՁ஋͕͋Δ͸ͣ  ͥͻݱ৔Ͱల։͍͚ͯͨͩ͠Δͱ޾͍ 47
48. ͓ΘΓ 48 ͋Γ͕ͱ͏͍͟͝·ͨ͠
49.  1BSJT+4
    
    
    3FRVJSF+4
    
    TMJEF
     .PEVMBS
    +BWB4DSJQU
    XJUI
    ".%
    BOE
    3FRVJSF+4  3FRVJSF+4
    
    1IPOF(BQ  (FUUJOH
    4UBSUFE
    .BOBHJOH
    $MJFOU
    4JEF
    4DSJQUT
    XJUI
    3FRVJSFKT
    m
    *
    "N
    /PU
    .ZTFMG  /BNFTQBDFT
    BSF
    0ME
    4DIPPM
    ]
    #MPH
    ]
    .JMMFS
    .FEFJSPT  ".%
    JT
    /PU
    UIF
    "OTXFS
    
    5PN
    %BMF  +BWB4DSJQU
    NPEVMF
    MPBEFST
    OFDFTTBSZ
    FWJM
    ]
    3VCFO
    7FSCPSHI  KBQI S
    CZ
    $ISJT
    4USPN
    1SFUUZ
    #BDLCPOFKT
    7JFXT
    XJUI
    3FRVJSFKT 49