JS中的模块及模块加载器

这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战

CommonJS

CommonJS规范主要用于在服务器端实现模块化代码组织，也可用于定义在浏览器中使用的模块依赖。但是commonJS模块语法是不能在浏览器直接运行的，需要依赖require()指定依赖，然后通过export对象定义自己公共的API。

// 定义模块
var test = require('./../mdA.js');
module.exports = {
    thin: test.littleThing();
};

无论一个模块在 require()中被引用多少次，模块永远是单例。而且模块第一次被加载会被缓冲，后来加载会读取缓冲中的模块，模块加载是模块系统执行的同步操作。模块导出可以使用对象字面量赋值或每个属性赋一次值。

module.exports = {
    'name': 'zss',
    'age': 25
}
// 每个属性赋值
module.exports.name = 'zss'
module.exports.age = 25

CommonJS 目标环境为服务器，而且能够一次性把所有模块都加载到内存。而AMD模块实现的核心是用函数包装模块定义，可以防止声明全局变量，并允许加载器库控制何时加载模块。AMD模块还可以使用字符串标识来指定自己的依赖。而 AMD 加载器会在所有依赖模块加载完毕后立即调用模块工厂函数。AMD的功能比commonjs不同的是，还支持可选地为模块指定字符串标识符。

在模块加载方面，ES6模块的独特之处在于不仅可以通过浏览器原生加载，也可以与第三方加载器和构建工具一起加载，对于不支持es6的浏览器，可以采用第三方工具。ES6相比于commonjs和AMD的好处有ES6 模块是异步加载和执行的、模块可以请求加载其他模块、模块可以定义公共接口，其他模块可以基于这个公共接口观察和交互、模块中的 var 声明不会添加到 window 对象、ES6 模块不共享全局命名空间、支持循环依赖。

因为 ES6 命名导出可以将模块作为容器，所以可以在一个模块中声明多个命名导出。导出的值可以在导出语句中声明，也可以在导出之前声明：

export const test1 = 'zss';
export const test2 = 'zss1';

模块导入

模块可以通过使用import关键字使用其他模块导出的值。与export类似，不同的是，import必须出现在模块的顶级：

// 合法
import ...
不合法
if (zss) {
    import ...
}

虽然import语句被提升到模块顶部。与export 关键字类似，import 语句与使用导入值的语句的相对位置并不重要。但是推荐把导入语句放在模块顶部。模块标识符可以是相对于当前模块的相对路径，也可以是指向模块文件的绝对路径。它必须是纯字符串，不能是动态计算的结果。而且也不可以是拼接的字符串。