JavaScript的模块化规范

为什么要进行模块化？

1）模块化就是将系统分离成独立功能的模块，这样我们需要什么功能，就加载什么功能
2）模块化的好处：

• 避免命名空间的冲突（减少命名空间的污染）
• 更好的分离，实现按需加载
• 提高可代码的复用性
• 提高了代码的维护性

服务端 ：NodeJS 服务：CommonJS规范，新版本的Node也可以启用ES6 Module功能

浏览器端：主要使用的是AMD规范和CMD规范，现在已经逐步被ES6 Module取代

Module模式

CommonJs模式

主要用在Node开发

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

AMD

RequireJS 在推广过程中对模块定义的规范化产出

CMD

 SeaJS 在推广过程中对模块定义的规范化产出

UMD（AMD和CommonJS的糅合）

(function (window, factory) {
    if (typeof exports === 'object') {
     
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
     
        define(factory);
    } else {
     
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

ES6 module

ES6模块与模块化规范相比，有两大特点：

• 模块化规范输出的是一个值的拷贝，ES6 模块输出的是值的引用。

• 模块化规范是运行时加载，ES6 模块是编译时输出接口。