Web前端主流模块化框架的区别

• 主流模块化框架

  • commonJS
  • AMD(Asynchronous Module Definition)
  • CMD(Common Module Definition)
  • UMD(Universal Module Definition)
  • ES6规范

commonJS

• commonJS模块化

  • 定义模块：即一个单独的文件就是一个模块，切该文件中的作用域独立，当中的变量是无法被其他文件引用的，如果要使用需要将其定义为global；
  • 输出模块：模块只有一个出口，即使用module.exports对象，将需要输出的内容放入到该对象中；
  • 加载模块：通过require加载，例如：var module = require('./moduleFile.js');该module的值即对应文件内部的module.exports对象， 然后就可以通过module名称去引用模块中的变量和函数了；

commonJS是基于服务器端开发的，由于require是同步加载，所以当在浏览器中是无法运行的，所以就有了下面的异步模块的出现。

AMD(Asynchronous Module Definition)，异步模块定义

• AMD是一套基于浏览器端模块化开发的规范，在进行页面开发时需要用到该规范的库函数，即：requireJS

• requireJS解决了两个问题

  • 多文件依赖关系处理，被依赖的需要早一步被加载；
  • 加载js时候页面会停止渲染，如果加载的文件越多，页面失去响应的时间就会越长；

CMD(Common Module Definition)通用模块定义

• 就近依赖，需要时再进行加载，所以执行顺序和书写顺序一致；这点与AMD不同，AMD是在使用模块之前将依赖模块全部加载完成，但由于网络等其他因素可能导致依赖模块下载先后顺序不一致这就导致了，执行顺序可能跟书写顺序不一致的情况。

UMD(Universal Module Definition)

• 希望提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式),。
• 先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。
• 再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
• 前两个都不存在，则将模块公开到全局（window或global）。

ES6模块化，未来标准，但目前未广泛使用

• 优点

  • 类似commonJS，语法更简洁；
  • 类似AMD，直接支持异步加载和配置模块加载；
  • 结构可以做静态分析，静态检测；
  • 比commonJS更好的支持循环依赖；

• 语法概述

  • 命名式导出方式：每个模块可以有多个
  • 定义式导出方式：每个模块只有一个