js模块化，理解AMD,CommonJS和es6

1. CommonJS：

同步模块加载 ,Commonjs主要应用的环境是nodejs，也就是服务器端广泛使用的一种模块化机制，模块一般都存在于本地，所以不需要考虑网络加载因素，所以是 同步加载。CommonJS 模块语法不能在浏览器中直接运行。

CommonJS 模块定义需要使用 require()指定依赖，而使用 exports 对象定义自己的公共 API。每个模块都有自己独立的作用域，module变量代表当前模块。

模块是值的“浅”拷贝

// 输出模块 moduleA.jsvar x = 1function fun() {    x++;}module.exports = {    x: x,    fun: fun,};// 引入模块 main.jsvar mod = require('./moduleA.js');console.log(mod.x); // 1mod.fun();console.log(mod.x); // 1

// 输出模块 moduleA.jsvar x = {    value: 1}function fun() {    x.value++;}module.exports = {    x: x,    fun: fun,};// 引入模块 main.jsvar mod = require('./moduleA.js');console.log(mod.x.value); // 1mod.fun();console.log(mod.x.value); // 2

结论： value 是会发生改变的。说明这是 "值的拷贝"，只是对于引用类型而言，值指的其实是引用地址。

2. AMD：

异步模块定义 ，为浏览器环境设计，RequireJS即为遵循AMD规范的模块化工具，requireJS的基本思想是，通过define方法定义模块化，通过require加载模块。

AMD 模块实现的核心是用函数包装模块定义。这样可以防止声明全局变量，并允许加载器库控制何时加载模块

通过define方法定义模块，但是按照俩种情况进行书写。

1.该模块独立存在，不依赖其他模块（可以返回任何值）：

define(function() {    // to do    return {    // 返回的接口    }})

2.该模块依赖其他模块时（）：

define(['module1','module2'], function(module1, module2) {    //to do    return {    // 返回的接口    }})

AMD要求在使用前需要先把所有的模块都写出来

3. ES6模块：

如果使用es6语法，那么则无需引入requireJS进行模块化，它的特点主要为： ES6 模块默认在严格模式下执行。  ES6 模块不共享全局命名空间。  模块顶级 this 的值是 undefined（常规脚本中是 window）。  模块中的 var 声明不会添加到 window 对象。  ES6 模块是异步加载和执行的。

导出：

export 导出该模块要导出的变量、函数、对象等等。

    export const color = '#000';

export default 该模块的默认输出值，可以为变量、函数、对象,一个模块只能导出一个默认值。默认导出的内容可以无名称，因为默认导出就代表该模块，但也可以有名称，或者使用别名 as。

    export default const color = '#fff';

使用：

导入非默认内容，需要用结构的方式，因为在模块中，非默认导出的内容，都会被添加到一个变量中，用结构的方式拿出一个或多个内容。

    import { color } from './color';

导入默认内容，可以直接导入即可。

    import color from './color';

原文：https://juejin.cn/post/7096319808756514830