模块化、CommonJS规范的require与es6规范的import的区别

模块化作用

• 解决变量间相互污染的问题，以及变量命名冲突的问题
• 提高代码的可维护性、可拓展性和复用性

1. 自执行函数实现的模块化
2. AMD 、CMD 和 UMD
   2.1 AMD 是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义" ，它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖项都加载完成之后，这个回调函数才会运行。
   2.2 CMD 是"Common Module Definition"的缩写，意思就是"公共模块定义"。CMD 可以使用 require 同步加载依赖，也可以使用 require.async 来异步加载依赖。
   2.3 AMD 和 CMD 都是非官方的两种 js 模块化规范，AMD 标准的代表框架是 RequireJS ，CMD 标准的代表框架是 SeaJS。
   2.4 AMD 和 CMD 相比，很大的一个区别就是引入模块的时机，AMD 是前置依赖，也就是说，目标模块代码执行前，必须保证所有的依赖都被引入并且执行。CMD 是后置依赖，也就是说，只有在目标代码中手动执行 require(..) 的时候，相关依赖才会被加载并执行。
   还有一个区别就是引入模块的方式，AMD 的定位是浏览器环境，所以是异步引入；而 CMD 的定位是浏览器环境和 Node 环境，它可以使用 require 进行同步引入，也可以使用 require.async 的方式进行异步引入。
   2.5 UMD 是一种通用的模块化方式，它将 AMD 和 CMD 以及全局注册的方式做了整合
3. CommonJS 实现模块化
   CommonJS 是的 NodeJS 所使用的一种服务端的模块化规范，它将每一个文件定义为一个 module ，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中
   3.1 所有代码都运行于模块作用域，不会污染全局。
   3.2 使用同步的方式加载，也就是说，只有加载完成才能执行后面的操作，这点和 AMD 不同，由于 CommonJS 的模块化是用在 Node 端也就是服务端，模块加载的时间损耗只是磁盘读取，这个加载速度是很快的，所以可以使用同步的方式。
   3.4 CommonJS 支持动态导入的方式,，比如：require(./${path}.js)
   3.5 模块可以多次加载，但是只会在第一次加载时运行一次，然后加载结果会被缓存，后面再次加载会直接读取缓存结果，如果想让模块重新执行，就必须清除缓存。
   3.6 CommonJS 模块输出的是一个** 值的拷贝，**
   3.7 模块的加载顺序，按照其在代码中出现的顺序。
4. ESModule 实现的模块化
   ESModule 是 ES6 提供的官方 js 模块化方案。目前浏览器还不能全面支持 ESModule 的语法，需要用 babel 进行解析。
   ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";
   ESModule 导出的模块是只读的，不能变更，否则报错，对象可以修改引用
   ESModule 输出的是值的引用
   ESModule 的模块化是静态的，和 CommonJS 不同，ESModule 模块不是对象，而是通过 export 命令显示输出的指定代码的片段，再通过 import 命令将代码命令输入。也就是说在编译阶段就需要确定模块之间的依赖关系，这一点不同于 AMD / CMD / CommonJS ，这三者都是在运行时确定模块间的依赖关系的。