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