js模块规范

1. commonJS:

(1). 特点: 模块加载会阻塞接下来代码的执行,需要等到模块加载完成才能继续执行(同步加载).

(2). 场景:

• 环境:服务器环境
• 应用

(3). 语法:

• 导入: a. require('路径')
• 导出: a. module.exports和exports b. exports只是对module.exports的一个引用: (1). 相当于Node为每个模块提供一个exports变量,指向module.exports. (2). 类似在每个模块头部,有一行var exports = module.exports

(4). demo:

// a.js
// 相当于这里还有一行：var exports = module.exports;代码
exports.a = 'Hello world';  // 相当于：module.exports.a = 'Hello world';

// b.js
var moduleA = require('./a.js');
console.log(moduleA.a);     // 打印出hello world

2. AMD:

(1). 特点:

• 异步加载
• 管理模块之间的依赖性,便于代码的编写和维护

(2). 场景:

• 环境:浏览器环境
• 应用:requireJS是参照AMD规范实现的

(3). 语法:

①. 导入:
    a. require(['模块名称'], function ('模块变量引用'){
         // 代码
       });

②. 导出:
    a. define(function () {
         return '值'
       });

(4). demo:

// a.js
define(function (){
　　return {
　　　a:'hello world'
　　}
});

// b.js
require(['./a.js'], function (moduleA){
    console.log(moduleA.a); // 打印出：hello world
});

3. CMD:

(1). 特点:

• CMD在AMD基础上改进的一种规范.
• 和AMD不同在于对依赖模块的执行时机处理不同: a. CMD是就近依赖 b. AMD是前置依赖

(2). 场景:

• 环境:浏览器环境
• 应用: a. seajs是参照UMD规范实现的 b. requireJS的最新的几个版本也是部分参照了UMD规范的实现

(3). 语法:

①. 导入:
    a. define(function(require, exports, module) {});

②. 导出:
    a. define(function (){ return '值' );

(4). demo:

// a.js
define(function (require, exports, module){
　　exports.a = 'hello world';
});
// b.js
define(function (require, exports, module){
    var moduleA = require('./a.js');
    console.log(moduleA.a); // 打印出：hello world
});

4. UMD:

(1). 特点:

• 通用模块定义规范(Universal Module Definition): a. 通过运行时或者编译时让同一个代码模块在使用CommonJs、CMD、AMD的项目中运行.
• 兼容AMD和commonJS规范的同时,还兼容全局引用的方式.

(2). 场景:

• 环境: 浏览器或服务器环境

(3). 语法:

①. 无导入导出规范,只有如下的一个常规写法:
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            //AMD
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            //Node, CommonJS之类的
            module.exports = factory(require('jquery'));
        } else {
            //浏览器全局变量(root 即 window)
            root.returnExports = factory(root.jQuery);
        }
    }(this, function ($) {
        //方法
        function myFunc(){};
        //暴露公共方法
        return myFunc;
    }));

5. ES6 module:

(1). 特点:

• 按需加载(编译时加载)
• import和export命令只能在模块的顶层,不能在代码块之中
• import()语句可以在代码块中实现异步动态按需动态加载

(2). 场景:

• 环境:浏览器或服务器环境
• 应用: a. Es6的最新语法支持规范

(3). 语法:

①. 导入:
    a. import {模块名A, 模块名B...} from '模块路径'

②. 导出:
    a. export和export default:
       (1). export只支持对象形式导出,不支持值的导出
       (2). export default命令:
            1. 用于指定模块的默认输出,只支持值导出,但只能指定一个
            2. 本质上它就是输出一个叫做default的变量或方法.

6. 总结:

• 浏览器端: a. AMD(异步模块规范) - RequireJs b. CMD(普通模块规范) - SeaJs
• Node端: a. CommonJs(同步模块规范)
• 浏览器和Node兼容端: a. UMD(通用模块规范)