CommonJS和AMD规范

CommonJS规范

项目最初是由Mozilla 的工程师 Kevin Dangoor 在2009年1月创建的，当时名为ServerJS。2009年8月，这个项目改名为 CommonJS，以显示其API更广泛实用性。

项目是以浏览器环境之外构建 JavaScript 生态系统为目标而产生的，它希望JavaScript可以运行在任何地方而不仅仅是浏览器。比如在服务器和桌面环境中。

所以CommonJS API定义了很多(非浏览器)使用的API，力求提供一个类似Python，Ruby和Java标准库。

CommonJS模块使用

CommonJS规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。

CommonJS模块规范主要分为引用、定义、标识模块三部分



module.exports = function( value ){
    return value * 2;
}

/**
 * 模块引用
 *
 * 使用require()方法来引入一个模块;
 * 这里引入 模块:moduleA，并复制给变量multiplyBy2;
 * 
 */

var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

/**
 * 模块标识
 * 
 * 指传给require()的参数 可以是小驼峰命名的模块名或是路径
 *
 * require("模块名"):当前目录下的node_modules目录中的模块
 * require("路径"):指定目录的指定模块
 *
 */ 

 
/**
 * 模块定义
 * 
 * module对象:module对象指的模块自身
 * export属性：module对象的属性，为外部提供接口
 *
 */ 
 
module.exports = function( value ){
    return value * 2;
}

Node.js最初的模块模式就是CommonJS(后面开始使用ECMAScript模块)。

CommonJS模块特点

CommonJS是同步加载模块，模块加载的顺序，按照其在代码中出现的顺序。
所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

浏览器对commonJS支持

我们在npm上下载的模块都是JavaScript编写的，但是由于浏览器不支持CommonJS格式所以用不了。

我们可以将模块转换成符合CommonJS规范的格式。

浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。module、exports、require、global

在Jquery中我们可以看到它对CommonJS的支持的实现：

Jquery:


( function( global, factory ) {

    "use strict";
    
    // 判断环境中是否有`module`和`exports`变量 
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        
        /**
          *  如果window.document存在，`module.exports = jQuery;`
          * 
          */            
        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 ) {

//省略
}

可以看出这是一个立即执行函数

(function( global, factory ){...})(window,function(window, noGlobal){...})
如果环境中存在module和exports变量即module.exports = jQuery;加载jQUery;否则正常加载jQuery

AMD规范

AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。

AMD 定义了一套 JavaScript 模块依赖异步加载标准，来解决同步加载的问题。

AMD使用

AMD模块定义: 通过define函数定义在闭包中

语法:

define(id?: String, dependencies?: String[], factory: Function|Object);

id:模块名(可选)
dependencies:指定需要加载的依赖列表(如果没有默认值为["require", "exports", "module"])
factory:模块的具体实现，它是一个函数或是对象。

AMD模块使用: 通过require函数来导入模块

require(['myModule'], function(myModule) {});

JavaScript库对AMD支持

在Jquery中我们可以看到它对AMD的支持的实现：


if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}