Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AMD/RequireJS @2012.07.02
Search
Shin-ichi Ueda
July 02, 2012
Technology
1
150
AMD/RequireJS @2012.07.02
Shin-ichi Ueda
July 02, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
140
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
11
5k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
350
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
370
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
2k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Gamification - CAS2011
davidbonilla
81
5.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
Module/Require.JS ϞδϡʔϧύλʔϯಋೖʹΑΔΤϨΨϯτͳ։ൃ 127݄2݄༵
Java Script ॻ͍ͯ·͔͢ʁ 127݄2݄༵
͜ Μ ͳ ͜ ͱ ʹ ͳ ͬ ͯ ͍
· ͤ Μ ͔ ʁ 127݄2݄༵
ϥΠϒϥϦͷڝ߹ 127݄2݄༵
ಡΈࠐΈࠈ <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> ..... 127݄2݄༵
ͦΜͳوํͷͨΊͷ “Module” ὑ 127݄2݄༵
Module Paternͱʁ 127݄2݄༵
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/ 127݄2݄༵
͔ΜͨΜͳྫ (ࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 127݄2݄༵
ͦͨ͠ΒɺϞδϡʔϧ͕ ͍ͬͺ͍Ͱ͖ͪΌͬͨ 127݄2݄༵
ґଘؔͱ͔ ෳࡶ͗ͯ͢ϠόΠ A B C D E F ͝ʔΔ G
127݄2݄༵
͏Μ͟Γ 127݄2݄༵
ͦ͜ͰɺRequire.JS 127݄2݄༵
Require.JS 127݄2݄༵
Require.JS • Ϟδϡʔϧϩʔμʔ • ґଘؔνΣοΫ • ඇಉظಡΈࠐΈ • AMDͱ͍͏ઐ༻ܗࣜ 127݄2݄༵
AMD Asynchronous Module Definition 127݄2݄༵
Module Patern Λগ͔͑ͨ͠ͷ 127݄2݄༵
define([ID], [ґଘؔఆٛ], [FactoryMethod]); ϞδϡʔϧΛ࡞Δ (֤Ϟδϡʔϧʹهड़) Usage 127݄2݄༵
require([ґଘؔఆٛ], [FactoryMethod]); ϞδϡʔϧΛ͏ (ΞϓϦέʔγϣϯʹجຊ1ͭ) Usage 127݄2݄༵
͔ΜͨΜͳྫ (ͬͺΓࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 127݄2݄༵
͜͜Ͱͷґଘؔ lib/jquery lib/ common blog/app main 127݄2݄༵
AMDʹରԠͯ͠ͳ͍ ϥΠϒϥϦ Ͳ͏͢Ε͍͍ͷʁ 127݄2݄༵
AMDԽ • ఘΊΔ • requirejsΑΓઌʹಡΉ • define()Ͱwrap • AMDରԠ൛Λ͏ 127݄2݄༵
·ͩΞϦ 127݄2݄༵
Ϟδϡʔϧ͕ ૿͑ͪΌͬͯ େมͰ͢ʼʻ 127݄2݄༵
r.js 127݄2݄༵
r.js • npm install -g requirejs • ґଘؔΛܭࢉͯ͠Ϟδϡʔϧ߹ମ • minified
• ϏϧυϓϩϑΝΠϧ(build.js) 127݄2݄༵
node r.js -o build.js Usage ͜Ε͚ͩʂ 127݄2݄༵
͔ΜͨΜͳྫ (ͬͺΓͬͺΓࢿྉԽ࣌ؒͳ͔ͬͨͷͰ…) 127݄2݄༵
One more thing... 127݄2݄༵
almond.js 127݄2݄༵
almond.js • require.jsͷػೳݶఆ൛ • ͍ܰ(1KB) • r.jsͰ࠷దԽͨ͠ޙͰ͏͜ͱ 127݄2݄༵
͓͠·͍ 127݄2݄༵