CommonJS

CommonJS的出发点：JS没有完善的模块系统，标准库较少，缺少包管理工具。伴随着NodeJS的兴起，能让JS在任何地方运行，特别是服务端，也达到了具备开发大型项目的能力，所以CommonJS营运而生。

CommonJS规范

  • 一个文件就是一个模块，拥有单独的作用域

  • 普通方式定义的变量、函数、对象都属于该模块内

  • 通过require来加载模块

  • 通过exports和module.exports来暴露块中的内容

注意

  1. 当exports和module.exports同时存在时，module.exports会覆盖exports

  2. 当模块内全是exports时，就等同于module.exports

  3. exports就是module.exports的子集

  4. 所有代码都运行在模块作用域，不会污染全局作用域

  5. 模块可以多次加载，但只会在第一次加载时候运行，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果

  6. 模块加载顺讯，按照代码出现的顺序同步加载

  7. __dirname代表当前磨具爱文件所在的文件夹路径

  8. __filename代表当前模块文件所在的文件夹路径+文件名

ES6模块化

export

export可以导出的是一个对象中包含的多个属性、方法。export default只能导出一个可以不具名的函数。我们可以通过import进行引用。同时，我们也可以直接使用require使用，原因是webpack起了server相关。

import

  1. import {fn} from ‘./xxx/xxx’ ( export 导出方式的 引用方式 )

  2. import fn from ‘./xxx/xxx1’ ( export default 导出方式的 引用方式 )

AMD

Asynchronous Module Definition，异步加载模块。它是一个在浏览器端模块化开发的规范，不是原生js的规范，使用AMD规范进行页面开发需要用到对应的函数库，RequireJS。

RequireJS主要解决的问题：

1s文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

  1. js加载的时候浏览器会停止页面渲染，加载文件愈多，页面相应事件就越长

  2. 异步前置加载

语法

  1. define(id,dependencies,factory)
  2. ——id 可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
  3. ——dependencies 是一个当前模块用来的模块名称数组
  4. ——factory 工厂方法，模块初始化要执行的函数或对象，如果为函数，它应该只被执行一次，如果是对象，此对象应该为模块的输出值。

CMD

因为CMD推崇一个文件一个模块，所以经常就用文件名作为模块id； CMD推崇依赖就近，所以一般不在define的参数中写依赖，而是在factory中写。

  1. define(id, deps, factory) 
  2. factory有三个参数： function(require, exports, module){}

  1. require require 是 factory 函数的第一个参数，require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口；

  2. exports exports 是一个对象，用来向外提供模块接口；

  3. module module是一个对象，上面存储了与当前模块相关联的一些属性和方法。

总结

commonjs是同步加载的。主要是在nodejs 也就是服务端应用的模块化机制，通过module.export 导出声明，通过require(‘’)加载。每个文件都是一个模块。他有自己的作用域，文件内的变量，属性函数等不能被外界访问。node会将模块缓存，第二次加载会直接在缓存中获取。

AMD是异步加载的。主要应用在浏览器环境下。requireJS是遵循AMD规范的模块化工具。他是通过define()定义声明，通过require(‘’,function(){})加载。

ES6的模块化加载时通过export default 导出 用import导入 可通过 {} 对导出的内容进行解构。

ES6的模块的运行机制与common不一样，js引擎对脚本静态分析的时候，遇到模块加载指令后会生成一个只读引用，等到脚本真正执行的时候才会通过引用去模块中获取值，在引用到执行的过程中 模块中的值发生了变化，导入的这里也会跟着变，ES6模块是动态引用，并不会缓存值，模块里的比那辆绑定所在的模块。