javascript modules in practice
DESCRIPTION
JavaScript modules in a nutshell. Krusche & Company Knowledge Academy seminar for Front-End developers.TRANSCRIPT
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="/public/js/libs/lib2.js"></script> <script src="/public/js/libs/lib3.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
AMDThe 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; }});
(function(root, factory) { if (typeof define === 'function' && define.amd) { define('my-awesome-module', [], factory); } else { root.MyAwesomeModule = factory(); }}(this, function() { var MyAwesomeModule = function() {};
return new MyAwesomeModule();}));
If AMD JS isn't implemented, modules can look as follows
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