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;
    } );
}