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
170
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
200
The Life and Times of a React Component
matthewwithanm
1
150
Everyone's Happy: React, Server-side Rendering & SEO
matthewwithanm
2
1.1k
Conquering State
matthewwithanm
1
340
Django Static Stuff
matthewwithanm
6
7.6k
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
Ruby Pattern Matching
bkuhlmann
0
930
ゆるい個人開発のススメ
kuroppe1819
10
1k
Snowflakeで眠ったデータを起こそう!
estie
0
130
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
420
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
850
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.3k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
Featured
See All Featured
Building Your Own Lightsaber
phodgson
100
5.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
5
3.4k
Designing for humans not robots
tammielis
248
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
18
1.6k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
How STYLIGHT went responsive
nonsquared
92
4.8k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
How to Ace a Technical Interview
jacobian
273
22k
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