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
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
370
LLM時代の検索
shibuiwilliam
2
200
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
360
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Optimizing for Happiness
mojombo
379
70k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
44
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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݄༵