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

Getting Started with RequireJS

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
November 16, 2012

Getting Started with RequireJS

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

November 16, 2012
Tweet

Transcript

  1. (FUUJOH4UBSUFE 3FRVJSF+4 ࣾ಺ษڧձ 1

  2. !BIPNV IUUQBIPNV 2

  3. 1SPCMFNT .PEVMBS+BWB4DSJQU $BTF4UVEZ )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. $PNNPOJTTVFT 9  ΘΕΘΕͷѻ͏ίʔυ͸๲େͰ͋Δ  ݸʑͷίʔυ͸ཻ౓ΛͦΖ͍͑ͨ  ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠  ґଘؔ܎Λ੔ཧ͍ͨ͠

     ͳΜͱ͔͍ͨ͠
  10. .PEVMBS +BWB4DSJQU 10 Ϟδϡϥʔͳ+BWB4DSJQUͰ͋Δ͜ͱͷ͓͞Β͍

  11. &YBNQMFT 11

  12. FH5)&#*(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. (JWFOCFOFpUT  3FRVJSF+4͸ඇৗʹݡ͍  ґଘղܾ͕γϯϓϧʹͳΔ  EFpOFΛར༻ͨ͠ύλʔϯ͕ڧ੍͞ΕΔ  ίʔσΟϯάύλʔϯͷ౷੍͕औΓ΍͍͢ 

    ϞδϡϥʔͰ͋Δ͜ͱΛҙࣝ͠΍͘͢ͳΔ 23
  24. $BTF4UVEZ 24 ։ൃதϓϩδΣΫτతͳࣄྫ঺հ

  25. 6TJOHMJCSBSJFT 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⒎FSFODFGSPNDPODBU  খʙதن໛Ͱ͋Ε͹DPODBUͰྑ͍͔ͳɺͱ  γϯϓϧͩ͠  ͕ɺDPODBU͸ґଘੑΛࣔͤͳ͍  ͕ɺDPODBU͸࠶ར༻ੑΛαϙʔτ͠ͳ͍ 

    ͳͥͳΒɺԿͷύλʔϯ΋ఏࣔ͠ͳ͍͔Β 28
  29. 4FFNTMJLFHPPE 29 ґଘΛҙࣝ͢Δྑ͍श׳ ݟ௨͠΋ྑ͘ͳΔ

  30. %FFQEFQFOEFODJFT 30 ͕ɺ஖ᥨͷ૥Λݟͯෆ҆ʹͳΔ

  31. $BMMTUBDL)FMM 31

  32. 6NN 32  ·͋ɺؾʹ͠ͳ͍͜ͱʹͨ͠  ;FQUP΍6OEFSTDPSF MPEBTI ͷΑ͏ʹ HMPCBMʹFYQPSU͢ΔౕΒ͸αϘͬͨ 

    ςετपΓ͸΋͏ͪΐ͍ɺͲ͏ʹ͔͍ͨ͠
  33. )BOET0O ϒϥ΢β".%ˍSKT0QUJNJ[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. $POpHVSBUJPO4UFQT  SFRVJSFKTDPOpH ͰCBTF6SM͢Δ  KTMJC KTΛQBUIT͢Δ  TIJN͢Δ 37

  38. *OTUBMMSKT # άϩʔόϧʹΠϯετʔϧ % npm install -g requirejs # ύε͕௨͍ͬͯΕ͹ɺr.js͕ར༻ՄೳʹͳΔ

    % r.js See https://github.com/jrburke/r.js for usage 38
  39. 6TJOHSKT % 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 "QQFOEJYXJUI#BDLCPOF
  43. "QQFOEJYXJUI+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+44VHBS 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. "QQFOEJYNBEHF # 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+43FRVJSF+4 TMJEF  .PEVMBS+BWB4DSJQUXJUI".%BOE3FRVJSF+4  3FRVJSF+4 1IPOF(BQ  (FUUJOH4UBSUFE.BOBHJOH$MJFOU4JEF4DSJQUTXJUI3FRVJSFKT

    m*"N/PU.ZTFMG  /BNFTQBDFTBSF0ME4DIPPM]#MPH].JMMFS.FEFJSPT  ".%JT/PUUIF"OTXFS5PN%BMF  +BWB4DSJQUNPEVMFMPBEFSTOFDFTTBSZFWJM ]3VCFO 7FSCPSHI  KBQI S CZ$ISJT4USPN1SFUUZ#BDLCPOFKT7JFXTXJUI 3FRVJSFKT 49