JS模块化演变及其区别

为什么需要模块化？

1. 变量和方法不容易维护，容易污染到全局作用域。
2. 通过script标签进行大量引入资源，代码可读性和可维护性都比较差。
3. 代码一多就比较复杂。
4. 多人合作的场景下，资源的引入会带来比较大的困难。

JS模块化的演变史

1. CommonJS

1. 模块内的代码运行在模拟作用域中，不会污染到全局作用域中。
2. 模块可以多次引入，但只会在第一次加载的时候执行一次，后面的运行都是从缓存中获取值。
3. 代码出现的顺序就是模块加载的顺序。

module.exports = {age: 1,name: 'hello'}

const foo = require('./foo.js');

2. ES6 Module

问题汇总

RQ1：浏览器为什么不适用CommonJS？

RQ2：CommonJS和ES6 Module之间的区别

1. CommonJS输出的是值的拷贝，而ES6 Module输出的是值的引用。
2. CommonJS模块是运行时加载，ES6 Moduke是编译时输出接口。
3. CommonJS加载是同步的可能阻塞的，ES6 Module是异步加载。

RQ3：在Node.js中module.exports和exports有什么区别？

1. 通过module.exports暴露的函数，在引入的时候可以不知道函数名，但是通过exports暴露的内容必须知道名字。
2. exports对象是module对象的一个属性，初始时module.exports和exports指向的是同一块内存区域。
3. 模块导出的是module.exports，exports只是和它指向的是同一片内存，在不改变exports内存的情况下，修改exports的值可以改变module.exports的值。
4. 导出时尽量使用module.exports以避免赋值导致的混乱。