AMD/RequireJS @2012.07.02

Transcript

1. Module/Require.JS ϞδϡʔϧύλʔϯಋೖʹΑΔΤϨΨϯτͳ։ൃ 12೥7݄2೔݄༵೔
2. Java Script ॻ͍ͯ·͔͢ʁ 12೥7݄2೔݄༵೔
3. ͜ Μ ͳ ͜ ͱ ʹ ͳ ͬ ͯ ͍ · ͤ Μ ͔ ʁ 12೥7݄2೔݄༵೔
4. ϥΠϒϥϦͷڝ߹ 12೥7݄2೔݄༵೔
5. ಡΈࠐΈ஍ࠈ <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.plugin1.js"></script> <script type="text/javascript" src="jquery.plugin2.js"></script> <script type="text/javascript" src="jquery.plugin3.js"></script> <script type="text/javascript" src="jquery.plugin4.js"></script> <script type="text/javascript" src="jquery.plugin5.js"></script> <script type="text/javascript" src="jquery.plugin6.js"></script> <script type="text/javascript" src="jquery.plugin7.js"></script> <script type="text/javascript" src="jquery.plugin8.js"></script> <script type="text/javascript" src="jquery.plugin9.js"></script> <script type="text/javascript" src="jquery.plugin10.js"></script> <script type="text/javascript" src="jquery.plugin11.js"></script> <script type="text/javascript" src="jquery.plugin12.js"></script> <script type="text/javascript" src="jquery.plugin13.js"></script> <script type="text/javascript" src="jquery.plugin14.js"></script> ..... 12೥7݄2೔݄༵೔
6. ͦΜͳوํͷͨΊͷ “Module” ὑ 12೥7݄2೔݄༵೔
7. Module Paternͱ͸ʁ 12೥7݄2೔݄༵೔
8. var myModule = function() { // Private Variable var privateVar = ‘’; // Private Method var privateFunction = function() {}; return { // Public Variable publicVar: '', // Public Method publicFunction: function() {} } } (); // ಗ໊ؔ਺(͙͢࢖͑ΔΑ͏ʹ͢Δ) http://yuiblog.com/blog/2007/06/12/module-pattern/ 12೥7݄2೔݄༵೔
9. ͔ΜͨΜͳྫ (ࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 12೥7݄2೔݄༵೔
10. ͦͨ͠ΒɺϞδϡʔϧ͕ ͍ͬͺ͍Ͱ͖ͪΌͬͨ 12೥7݄2೔݄༵೔
11. ґଘؔ܎ͱ͔ ෳࡶ͗ͯ͢ϠόΠ A B C D E F ͝ʔΔ G 12೥7݄2೔݄༵೔
12. ͏Μ͟Γ 12೥7݄2೔݄༵೔
13. ͦ͜ͰɺRequire.JS 12೥7݄2೔݄༵೔
14. Require.JS 12೥7݄2೔݄༵೔
15. Require.JS • Ϟδϡʔϧϩʔμʔ • ґଘؔ܎νΣοΫ • ඇಉظಡΈࠐΈ • AMDͱ͍͏ઐ༻ܗࣜ 12೥7݄2೔݄༵೔
16. AMD Asynchronous Module Definition 12೥7݄2೔݄༵೔
17. Module Patern Λগ͔͑ͨ͠΋ͷ 12೥7݄2೔݄༵೔
18. define([ID], [ґଘؔ܎ఆٛ], [FactoryMethod]); ϞδϡʔϧΛ࡞Δ (֤Ϟδϡʔϧʹهड़) Usage 12೥7݄2೔݄༵೔
19. require([ґଘؔ܎ఆٛ], [FactoryMethod]); ϞδϡʔϧΛ࢖͏ (ΞϓϦέʔγϣϯʹجຊ1ͭ) Usage 12೥7݄2೔݄༵೔
20. ͔ΜͨΜͳྫ (΍ͬͺΓࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 12೥7݄2೔݄༵೔
21. ͜͜Ͱͷґଘؔ܎ lib/jquery lib/ common blog/app main 12೥7݄2೔݄༵೔
22. AMDʹରԠͯ͠ͳ͍ ϥΠϒϥϦ͸ Ͳ͏͢Ε͹͍͍ͷʁ 12೥7݄2೔݄༵೔
23. AMDԽ • ఘΊΔ • requirejsΑΓઌʹಡΉ • define()Ͱwrap • AMDରԠ൛Λ࢖͏ 12೥7݄2೔݄༵೔
24. ·ͩ໰୊ΞϦ 12೥7݄2೔݄༵೔
25. Ϟδϡʔϧ͕ ૿͑ͪΌͬͯ େมͰ͢ʼʻ 12೥7݄2೔݄༵೔
26. r.js 12೥7݄2೔݄༵೔
27. r.js • npm install -g requirejs • ґଘؔ܎Λܭࢉͯ͠Ϟδϡʔϧ߹ମ • minified • ϏϧυϓϩϑΝΠϧ(build.js) 12೥7݄2೔݄༵೔
28. node r.js -o build.js Usage ͜Ε͚ͩʂ 12೥7݄2೔݄༵೔
29. ͔ΜͨΜͳྫ (΍ͬͺΓ΍ͬͺΓࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 12೥7݄2೔݄༵೔
30. One more thing... 12೥7݄2೔݄༵೔
31. almond.js 12೥7݄2೔݄༵೔
32. almond.js • require.jsͷػೳݶఆ൛ • ͍ܰ(1KB) • r.jsͰ࠷దԽͨ͠ޙͰ࢖͏͜ͱ 12೥7݄2೔݄༵೔
33. ͓͠·͍ 12೥7݄2೔݄༵೔