Embed Size (px)
DESCRIPTION
Learn how to manage and dynamically load JavaScript code files and their dependencies in a robust, scalable way within your large web sites and applications using the RequireJS library.
Citation preview
Managing JavaScript Dependencies with
RequireJS
Den Odell
LibrariesjQuery, Modernizr, ...
FrameworksBackbone, Ember, ...
Reusable Plugin and Utility ScriptsjQuery plugins, TypeKit, Underscore, ...
Custom Application Code
<script src="/assets/js/lib/jquery-1.7.1.min.js"></script><script src="/assets/js/lib/jquery-ui-1.8.17.custom.min.js"></script><script src="/assets/js/global.js"></script><script src="/assets/js/breaking-news.js"></script><script src="/assets/js/lib/jquery.colorbox.js"></script><script src="/assets/js/modal.js"></script><script src="http://use.typekit.com/did3rrm.js"></script><!--[if lt IE 9]> <script src="/assets/js/lib/cssSandpaper/EventHelpers.js"></script> <script src="/assets/js/lib/cssSandpaper/cssQuery-p.js"></script> <script src="/assets/js/lib/cssSandpaper/jcoglan.com/sylvester.js"></script> <script src="/assets/js/lib/cssSandpaper/cssSandpaper.js"></script> <script src="/assets/js/lib/jquery-extended-selectors.js"></script> <script src="/assets/js/lib/selectivizr-min.js"></script><![endif]--> <script src="/assets/js/lib/bgpos.js"></script><script src="http://w.sharethis.com/button/buttons.js"></script><script src="/assets/js/lib/yepnope.css-prefix.js"></script><script src="/assets/js/feature-carousel.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/lib/jquery.ui.selectmenu.js"></script><script src="/assets/js/lib/jquery.selectmenu.js"></script><script src="/assets/js/lib/swfobject.js"></script><script src="/assets/js/flashembed.js"></script><script src="/assets/js/lib/jquery.jqplugin.1.0.2.min.js"></script><script src="/assets/js/audioplayer.js"></script><script src="/assets/js/game-tray.js"></script><script src="/assets/js/tracking.js"></script><script src="/assets/js/lib/time-tracker.js"></script>
More JavaScript typically means more complexity
RequireJS Modules & Dependencies
Let’s build a signup form!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mailing list</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<form action="thank-you.html" id="form" method="post">
<h1>Join our mailing list</h1>
<label for="email">Enter your email address</label>
<input type="text" name="email" id="email" placeholder="e.g. [email protected]">
<input type="submit" value="Sign up">
</form>
</body>
</html>
http://requirejs.org
Current version: 2.1.4Support: IE6+, FF2+, Safari 3.2+, Chrome
3+, Opera 10+Size: 5.5KB min+gzip
1. Listen for ‘submit’ event on the form
2. Validate the format of the email address provided
3. If the format is valid, allow the form to submit to the server
4. If the format is not valid, highlight the error and prevent the form submitting
1. Listen for ‘submit’ event on the form
2. Validate the format of the email address provided
3. If the format is valid, allow the form to submit to the server
4. If the format is not valid, highlight the error and prevent the form submitting
Main application script
jQuery
Validation plugin for jQuery
jQueryValidation plugin for jQuery
Main application script
jQueryValidation plugin for jQuery
Main application script
Dependencies
<script src="scripts/require.js" data-main="scripts/main"></script>
Adding RequireJS to HTML
define(
moduleName, // optional, defaults to name of file
dependencies, // optional array listing dependencies
function(params) {
// Function to execute once dependencies have been loaded
// params contains return values from the dependencies
}
);
Defining a code module in RequireJS
Example of a code module in RequireJS
define(["lib/jquery-1.9.0"], function($) {
// Do something with jQuery as $
});
Creating a module mapping for jQuery in main.js
requirejs.config({
paths: {
"jquery": "lib/jquery-1.9.0”
}
});
Extending the module mapping for jQuery in main.js
requirejs.config({
paths: {
"jquery": [
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min",
// If the CDN fails, load from this local module instead
"lib/jquery-1.9.0"
]
}
});
jQuery Validation Plug-in Modulescripts/lib/validation-plugin.js
define(["jquery"], function($) {
$.fn.isValidEmail = function() {
var isValid = true,
regEx = /\S+@\S+\.\S+/;
this.each(function() {
if (!regEx.test(this.value)) {
isValid = false;
}
});
return isValid;
};
});
scripts/lib/validation-plugin.js
Main application scriptscripts/lib/main.js
scripts/lib/main.jsrequire(["jquery", "lib/validation-plugin"], function($) {
var $form = $("#form”),
$email = $("#email");
$form.on("submit", function(e) {
e.preventDefault();
if ($email.isValidEmail()) {
$form.get(0).submit();
} else {
$email.addClass("error").focus();
}
});
$email.on("keyup", function() {
$email.removeClass("error");
});
});
Improving page load performance...
scripts/lib/main.jsrequire(["jquery"], function($) {
var $form = $("#form"),
$email = $("#email");
$form.on("submit", function(e) {
e.preventDefault();
require(["lib/validation-plugin"], function() {
if ($email.isValidEmail()) {
$form.get(0).submit();
} else {
$email.addClass("error").focus();
}
});
});
$email.on("keyup", function() {
$email.removeClass("error");
});
});
What else can RequireJS do?
Some Useful Plug-ins
i18ntext
handlebarsfont
cache
Thank You
