Requirejs

A JAVASCRIPT MODULE LOADER

Ed Siok
@sioked
Slalom Consulting

DEPENDENCIES
< !--scripts-->
<script type = "text/javascript"src = '/Scripts/jquery-1.5.2.min.js' > </script>
<script type="text/javascript " src='/Scripts/jquery-ui-1.8.11.custom.min.js'></script>
<script type="text / javascript " src='/Scripts/jquery.validate.min.js'></script>
<script type="text / javascript " src='/Scripts/jquery.validate.unobtrusive.min.js'></script>
<script type="text / javascript " src='/Scripts/jquery.timers-1.2.js'></script>
<script type="text / javascript " src='/Scripts/jquery.easing.1.3.js'></script>
<script type="text / javascript " src='/Scripts/jquery.cycle.all.min.js'></script>
<script type="text / javascript " src='/Scripts/jquery.functions.js'></script>
<script type="text / javascript " src='/Scripts/jquery.dataTables.min.js'></script>
<script type="text / javascript " src='/Scripts/search.js'></script>

<script type="text / javascript " src='/Scripts/galleryview.setup.js'></script>


<script type='text/javascript' src='/Scripts/CMS/GraphicBanner.js'></script>
<script type='text/javascript' src='/Scripts/CMS/SimpleTile.js'></script>
<script type='text/javascript' src='/Scripts/CMS/FocusAreaTabs.js'></script>

<script type="text / javascript ">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1988710-1']);
_gaq.push(['_trackPageview']);

(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

BASIC USE

<script data-main="scripts/main" src="scripts/require.js"></script>

BASIC USE

require([“some/module”, “a.js”, “b.js”],
function(){
//This function is called once all scripts are
downloaded and executed
});

// acura/tsx.js
define({
make: "Acura",
model: "tsx",
horsepower: 201
});

// main.js
require(['acura/tsx'], function(tsx){
console.log(tsx.horsepower);
});

// util.js
define(function(){
var SECONDS = 60,
MINS = 60,
HOURS = 24;
function convertDaysToSeconds(days){
return days*HOURS*MINS*SECONDS;
}

return {
daysToSeconds : convertDaysToSeconds
}
});

// main.js
require(['util'], function(util){
var days = 13;
var seconds = util.daysToSeconds(13);
});

// util.js
define("util", ["constants"], function(c){
function convertDaysToSeconds(days){
return days*c.HOURS*c.MINS*c.SECONDS;
}

return {
daysToSeconds : convertDaysToSeconds
}
});

//A few convenient extras:
require(["text!template.html"], function(template){
//The text is passed in as a string into the function
console.log(template);
});

//-----------------------------
require.ready(function(){
//fires once the dom is loaded - often in other libraries,
but very convenient nonetheless
});

//-----------------------------
require(['some/module'], function(){
//can nest requires
require(['a.js','b.js']);
});

//-----------------------------
//Conveniently, this also works:
var util = require(['util']);

Requirejs

More Related Content

What's hot (20)

Viewers also liked (6)

Recently uploaded (20)

Requirejs

Editor's Notes