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
RequireJS in 15 Minutes
Search
Matthew Dapena-Tretter
October 11, 2013
Programming
2
180
RequireJS in 15 Minutes
A quick intro to RequireJS
Matthew Dapena-Tretter
October 11, 2013
Tweet
Share
More Decks by Matthew Dapena-Tretter
See All by Matthew Dapena-Tretter
Isomorphic JS, Server-side Rendering, React & Rockefeller
matthewwithanm
3
210
The Life and Times of a React Component
matthewwithanm
1
170
Everyone's Happy: React, Server-side Rendering & SEO
matthewwithanm
2
1.2k
Conquering State
matthewwithanm
1
350
Django Static Stuff
matthewwithanm
6
8.2k
Other Decks in Programming
See All in Programming
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
Kiroで始めるAI-DLC
kaonash
2
610
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
AI時代のUIはどこへ行く?
yusukebe
18
9k
AIでLINEスタンプを作ってみた
eycjur
1
230
1から理解するWeb Push
dora1998
7
1.9k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
Testing Trophyは叫ばない
toms74209200
0
890
🔨 小さなビルドシステムを作る
momeemt
4
690
AIコーディングAgentとの向き合い方
eycjur
0
280
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
Building Applications with DynamoDB
mza
96
6.6k
Visualization
eitanlees
148
16k
Writing Fast Ruby
sferik
628
62k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Site-Speed That Sticks
csswizardry
10
820
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
REQUIRE•JS IN 15 MINUTES
The Old Way <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <script src="main.js"></script>
The Old Way •Dependencies defined out-of-band •Lots of script tags
(& requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
With RequireJS ? Dependencies defined out-of-band ? Lots of script
tags (& requests) ? …or a very very big main.js ? …or a build step in development ? All files load synchronously
With RequireJS <script src="require.js" data-main="main"></script>
Define Dependencies in Scripts require(['jquery', 'jquery.plugin'], function ($) { //
Main code goes here });
Use require() to Declare Dependencies For Scripts require(['jquery', 'jquery.plugin'], function
($) { // Main code goes here });
Module IDs (Not Paths) in Array Correspond to Arguments require(['jquery',
'jquery.plugin'], function ($) { // Main code goes here });
Write Your Own Modules! define(['jquery', 'jquery.plugin'], function ($) { function
makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Use define() to Declare Dependencies For Modules define(['jquery', 'jquery.plugin'], function
($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Dependencies Work the Same as With require() define(['jquery', 'jquery.plugin'], function
($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Return the Module From the Function define(['jquery', 'jquery.plugin'], function ($)
{ function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Alternative Syntax Improves Long Dependency Lists define(function (require) { var
$ = require('jquery'); require('jquery.plugin'); function makeButton (el) { $(el).click(function () { alert('I was clicked!'); });
Use Your Module in Other Modules or Scripts define(function (require)
{ var makeButton = require('makebutton'); makeButton('#element'); . . . . .
Module IDs Are Based on File Names… define(function (require) {
var makeButton = require('makebutton'); makeButton('#element'); . . . . .
…But Don’t Use Paths! That’s What Config is For require.config({
paths: { makebutton: 'path/to/makebutton' } });
…And For “Shimming” Scripts That Don’t Use AMD require.config({ shim:
{ underscore: { deps: ['jquery'], exports: '_' } }, paths: {
With RequireJS •Dependencies defined out-of-band •Lots of script tags (&
requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
Use r.js Optimizer For Production •Module-aware concatenation •Can build one
file or many $ node r.js -o name=main out=main-built.js
With RequireJS •Dependencies defined out-of-band •Lots of script tags (&
requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
requirejs.org @matthewwithanm hzdg.com