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
🔨 小さなビルドシステムを作る
momeemt
3
630
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
390
時間軸から考えるTerraformを使う理由と留意点
fufuhu
8
3k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
350
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
TanStack DB ~状態管理の新しい考え方~
bmthd
2
380
コンテキストエンジニアリング Cursor編
kinopeee
1
740
奥深くて厄介な「改行」と仲良くなる20分
oguemon
0
170
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
機能追加とリーダー業務の類似性
rinchoku
0
180
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
230
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Become a Pro
speakerdeck
PRO
29
5.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Into the Great Unknown - MozCon
thekraken
40
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
The Invisible Side of Design
smashingmag
301
51k
Designing Experiences People Love
moore
142
24k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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