js的模块化规范

js的模块化规范常见的有：AMD，CMD，commonJS，UMD，es6

前期在没有模块化的时候，js文件十分庞大，于是就按功能抽离划分为多个js文件。

但是在html页面通过script的方式加载大量js文件会出项许多问题，例如文件之间的相互依赖问题，浏览器的阻塞问题，接着就有了模块化规范。

对于前端拥有AMD,CMD,UMD，ES6的import/export

1）AMD

AMD是requireJS倡导的一种模块化规范，推崇依赖前置；在requireJS中模块是通过define来进行定义的，如果模块之间相互依赖，需要先将依赖模块导入进来，待导入完毕之后，在通过回掉函数的方式执行后面的代码，有效的解决了模块依赖的问题。

// CModuleJS

define(['AModuleJs','BModuleJS'], // AModuleJs,BModuleJS分别对应两个js文件（模块），运行至此已经下载完成，可直接使用
  function (AModuleJs, BModuleJS) {
    var a = AModuleJs();
    var b = BModuleJS;
    var c = a + b;
  })
}

　参考链接：http://www.cnblogs.com/evaling/p/6722760.html

 

2）CMD

CMD则是seaJS倡导的一种解决模块之间相互依赖规范,推崇依赖就近；在seaJS中一个脚本文件就是一个模块,所有的模块代码写在define的回调函数中，传递三个参数require,exports,module，通过使用 module.exports(exports) 对象向外暴露。

require 函数加载模块的时候，会自动拿到模块内部的 module.exports 对象

// main.js

define(function (require, exports, module) {
    var moduleA = require('add.js') // //等待add.js下载、执行完
    console.log(moduleA.add(10,20))
})

// add.js

define(function (require, exports, module) {
  function add(a, b){
    return a+b;
   }
  module.exports.add = add;
})

参考链接：https://www.cnblogs.com/jingh/p/6024873.html

 

比较两者的异同？
相同：都是js模块化的异步加载方式
不同：可以看出AMD规范是在所有以来文件加载完毕之后才执行回调函数，cmd是按需加载，代码执行到了就加载

优缺分析：
AMD:
缺点：
a）前期模块初始化的时间相对较长（需要加载所有依赖的文件）
b）如果某一个依赖文件出错，会导致整个代码无法执行，资源浪费（双刃剑）
c）有时候加载的依赖项由于代码变更可能会没被用到（else,case分支），但是忘记修改，会造成资源浪费
优点：
a）提前加载依赖文件可以提前发现错误，解决问题（双刃剑）　　

CMD:
优点：
a）延迟按需加载，代码执行到了就加载，可节省资源（用不到的就不加载）
缺点：
a）不能提前暴露错误，降低开发效率

 

3）commonJS

commonJS服务器端（nodeJS）的js模块规范,同步加载方式。因为nodeJS会被部署在服务端不存在js模块下载阻塞的问题，但是浏览器则是本地客户机存在下载js文件阻塞的问题。

 

4）UMD

更像是一种语法糖首先判断程序环境是否是nodeJS环境如果是就使用commonJS规范，在判断是否支持AMD，如果是就使用AMD规范，否则就全局注册。

function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}

 

5）ES6模块化规范　

使用import/export语法，在文件顶部导入需要的模块，特点是：静态化，在编译时候(决定import 不能放在执行代码中)确定模块之间的以来关系，以及输入输出变量。

commonJS,AMD,CMD都是在执行阶段导入模块，确定依赖关系。

参考链接： https://segmentfault.com/a/1190000015991869