Writing Modular JavaScript With AMD, CommonJS & ES Harmony (Addy Osmani)

In notebook:
Article Notes
Created at:
JavaScript jQuery libraries
Writing Modular JavaScript With AMD, CommonJS & ES Harmony by Addy Osmani  An AMD module definition, the base:
    module_id /*optional*/, 
    [dependencies] /*optional*/, 
    definition function /*function for instantiating the module or object*/
then whatever you ​return​ with the definition function is what is exported.

to require a module:
  require(['foo', 'bar'], function ( foo, bar ) {
        // rest of your code here
you can use require inside a module, to load it dynamically:
  define(function ( require ) {
    var isReady = false, foobar;
    // note the inline require within our module definition
    require(['foo', 'bar'], function (foo, bar) {
        isReady = true;
        foobar = foo() + bar();
    // we can still return a module
    return {
        isReady: isReady,
        foobar: foobar
you can basically require anything as a dependency (templates, markdown files, even CSS)

You can load AMD modules with require.js or curl.js


It's well suited for browser for lazy-loading, cross-domain files without server-side tools. You can include multiple modules in a single file.


you can require jquery files as well:
    function($, colorPlugin, _){
        // use your plugins
as of jquery 1.7 you can register jQuery as an asynchronous module. Requirejs and curl are compatbile.

need to set ​define.amd.jQuery = true​ to support multiple versions of jquery


example of importing and exporting
  var modA = require('./foo');
var modB = require('./bar');
exports.app = function(){
    console.log('Im an application!');
exports.foo = function(){
    return modA.helloWorld();
curl supports commonjs modules in the browser
In general commonjs is better suited for the server (snychronous loading, slightly cleaner (no wrappers), closer to ES6 specifications)

ES6 modules

  module staff{
    // specify (public) exports that can be consumed by
    // other modules
    export var baker = {
        bake: function( item ){
            console.log('Woo! I just baked ' + item);
module skills{
    export var specialty = "baking";
    export var experience = "5 years";
module cakeFactory{
    // specify dependencies
    import baker from staff;
    // import everything with wildcards
    import * from skills;
    export var oven = {
        makeCupcake: function( toppings ){
            baker.bake('cupcake', toppings);
        makeMuffin: function( mSize ){
            baker.bake('muffin', size);
remote sources:
  module cakeFactory from 'http://addyosmani.com/factory/cakes.js';
on the server:
  // io/File.js
export function open(path) { ... };
export function close(hnd) { ... };

// compiler/LexicalHandler.js
module file from 'io/File';
import { open, close } from file;
export function scan(in) {
    try {
        var h = open(in) ...
    finally { close(h) }