JavaScript Modules in Practice

JavaScript Modules
by Ivan Sirosh

JavaScript module pattern:
How to create it and why?

Approach to building large
applications

Module pattern requires understanding
modules as a system
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<div id="content">
</div>
<script src="/public/js/libs/lib1.js"></script>
<script src="/module1.js"></script>
<script src="/module2.js"></script>
<script src="/app.js"></script>
</body>
</html>

This is how it’s usually done
var Module = {
a: 1,
b: function() {
//do something
}
};

Correct ****** pattern
(function () {
var a = 1;
function b(){
//do something
}
}());

Import of global variables
(function ($, YUI) {
$.each([1,2,3,4,5], function(){
//do something
});
var Y = YUI();
Y.use('node', function(Y){
//do something
});
}(jQuery, YUI));

Import of local variables
(function(awesome) {
var a;
awesome.splash(function() {
a = 1;
});
waterPool.set("new", function() {
return a;
});
} (waterPool.get("awesome")));

Export of the module
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// do something
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// do something
};
return my;
}());

Module extension if the module
doesn't exist
var MODULE = (function (my) {
my.anotherMethod = function () {
// do something
};
return my;
}(MODULE || {}));

We’re done here*
* almost done

Let's look at 3 types of solutions

The bad one
pure JS
var _modules = [];
_modules[0] = function(p){
//do something
};
_modules[1] = [];
_modules[1][0] = 1;
_modules[0](_modules[1][0]);

The ugly one –
Why reinvent the wheel?
pure JS
(function () {
var $ = this.jQuery;
this.myExample = function () {};
}());

The good one
AMD api
define(['jquery'] , function () {
return jQuery;
});
require(['jquery'] , function ($) {
console.log($.now());
});

Require JS
RequireJS is a JavaScript file and module loader. It is
optimized for in-browser use, but it can be used in other
JavaScript environments, like Rhino and Node. Using a
modular script loader like RequireJS will improve the speed
and quality of your code.
IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔
http://requirejs.org

Almond JS
A replacement AMD loader for RequireJS. It is a smaller "shim"
loader, providing the minimal AMD API footprint that includes
loader plugin support.
What is supported:
• dependencies with relative IDs.
• define('id', {}) definitions.
• define(), require() and requirejs() calls.
https://github.com/jrburke/almond

AMD
The Asynchronous Module Definition
https://github.com/amdjs/amdjs-api/wiki/AMD
define(id, dependencies, factory);
require(dependencies, callback);

define
define('a-module', function () {
return 'a-module';
});
define('b-module', function () {
return 'b-module';
});
define('c-module', ['a-module', 'b-module'] function (a, b) {
return a + ' ' + b + ' ' + 'c-module';
});

require
require(['c-module'], function (c_module) {
if(c_module){
console.log(c_module)
}
});
a-module b-module c-module

define("alpha", ["require", "exports", "beta"], function(require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});

define(["alpha"], function(alpha) {
return {
verb: function() {
return alpha.verb() + 2;
}
};
});
define({
add: function(x, y) {
return x + y;
}
});

jQuery example done already in the
new version which support AMD
(function(global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = global.document ? factory(global, true) : function(w) {
if (!w.document) {
throw new Error("jQuery requires a window with a document");
}
return factory(w);
};
} else {
factory(global);
}
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
var jQuery;
/*-----------------------------------*/
/* ...
/* extend jQuery oject
/* ...
/*-----------------------------------*/
return jQuery;
}));

Don't reinvent the wheel – just use it smartly ;)
JS Modules

JavaScript Modules in Practice

Recommended

More Related Content

What's hot (20)

Similar to JavaScript Modules in Practice (20)

Recently uploaded (20)

JavaScript Modules in Practice