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.1k
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
ニーリーにおけるプロダクトエンジニア
nealle
0
890
NPOでのDevinの活用
codeforeveryone
0
870
Deep Dive into ~/.claude/projects
hiragram
14
11k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
PipeCDのプラグイン化で目指すところ
warashi
1
290
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
NEWT Backend Evolution
xpromx
1
110
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How to Ace a Technical Interview
jacobian
278
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Designing for Performance
lara
610
69k
Facilitating Awesome Meetings
lara
54
6.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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