为什么需要模块化

1. 为什么需要模块化

• 如果多人同时开发一个项目的时候，每个人都会创建很多的 .js 文件，可能就会存在命名冲突的问题。

• 为了解决这个问题我们可以使用立即调用函数。但是立即执行函数会导致一个新的问题，就是我们不能再之后创建的 .js 文件中，再次去使用之前文件的变量或者函数。

• 因此，我们提出了模块化开发的概念，在 ES6 中，其实就是创建一个 obj 对象，将你想要导出去的对象添加到这个 obj 对象中，然后 return 这个对象，最后，为立即执行函数整体创建一个 const 类型的名字来接收 obj 对象。这样就可以在其他文件中使用 script 引入之后，利用这个名字调用这个 .js 文件了。

// 导出
const moduleA = (function() {
  var obj = {};
  var flag = true;
  obj.flag = flag;
  return obj;
})()
// 导入
<script src='./aaa.js'></script>
console.log('moduleA.flag');

2. 常见的模块化规范

1. CommonJS（Node.js 使用的就是这种模块化方式，webpack 基于 Node 环境）

// 导出
module.exports = {
  flag,
  max
}
// 导入
let {flag, max} = require('./aaa.js'); // 对象解构
// 等价于
const aaa = require('./aaa.js');
let flag = aaa.flag;
let max = aaa.max;

2. AMD
3. CMD
4. ES6 的 Modules

type="module"
export {flag, max};
// export let num1 = 100;
// export let height = 1.88;
import {flag, max} from './aaa.js'

// 自己命名变量 default 只能出现一次
// export default address;
// import add from './aaa.js'
// 自己命名函数 此时函数可以没有名字
export default function() {
}
import fun from './aaa.js'

// 统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag);