CommonJS

The official JavaScript specification defines APIs for some objects that are useful for building browser-based applications. However, the spec does not define a standard library that is useful for building a broader range of applications.

The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

CommonJS Standards

• Modules
  
• Binary strings and buffers
  
• Charset encodings
  
• Binary, buffered, and textual input and output (io) streams
  
• System process arguments, environment, and streams
  
• File system interface
  
• Socket streams
  
• Unit test assertions, running, and reporting
  
• Web server gateway interface, JSGI
  
• Local and remote packages and package management
  

CommonJS Implementations

Modules/1.1

Modules/1.1

// math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

// increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

// program.js
var inc = require('increment').increment;
var a = 1;
inc(a); // 2

module.id == "program";

Node.js

Node.js

modules api

AMD

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.

It is unrelated to the technology company AMD and the processors it makes.

AMD api

require

define

Sets up the module with ID of "alpha", that uses require, exports and the module with ID of "beta":

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

An anonymous module that returns an object literal:

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

require

define(['require'], function (require) {
    //the require in here is a local require.
});

define(function (require, exports, module) {
    //the require in here is a local require.
});

define(function (require) {
    var a = require('a');
});

 define(function (require) {
    require(['a', 'b'], function (a, b) {
        //modules a and b are now available for use.
    });
});

Loader Plugins

define(['text!../templates/start.html'], function (template) {
    //do something with the template text string.
});

Common Config

{
  baseUrl: './foo/bar'
}

{
  shim: {
    'some/thing': {
      deps: ['a', 'b'],
      exports: 'some.thing',
      init: function (a, b) {
        return some.thing + 'another';
      }
    }
  }
}

{
  paths: {
    "some": "some/v1.0"
  }
}

AMD Implementations

RequireJS

curlJS

Dojo Loader

YUI Modules

add

// name.js
YUI.add('name', function(Y) {
    Y.namespace('mt').name = 'lyc';
});

use

// index.js
YUI({
  modules: {
    'name': './name.js'
  }
}).use('name', function(Y) {
  Y.log(Y.mt.name);
});

Namespace Are Old School

ES6 Modules is comming

ES6 Modules

ES6实现了模块功能，试图解决JavaScript代码的依赖和部署上的问题，取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

Using ES6 modules with YUI

After transpiling