6-前端模块化
一、为什么需要模块化
1、JavaScript的原始功能
在网页开发的早期，js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码很少，直接将代码写在 <script> 标签中即可：
<script> document.getElementById('button').onclick = function(){ console.log('按钮发生了点击'); } </script>
随着 ajax 异步请求的出现，慢慢形成了前后端的分离，客户端需要完成的事情越来越多，代码量也是与日俱增，为了应对代码量的剧增，
我们通常会将代码组织在多个js文件中，进行维护，但是这种维护方式，依然不能避免一些灾难性的问题；
比如全局变量同名问题：
// a.js 文件中，小明定义了一个变量 flag ， 值为 true
flag = true
// b.js 文件中，小红也定义了一个变量 flag ， 值为 false
flag = false
// main.js 文件中，小明想通过 flag 进行一些判断，完成后续的事情
if (flag) {
console.log('小明是个画家'); // 结果可能会因为flag同名的问题，而出现逻辑错误
}另外，这种代码的编写方式对 js 文件的依赖顺序几乎是强制性的，当 js 文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较麻烦的事情，
而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生；
这时，我们可以使用匿名函数来解决方面的重名问题；
2、匿名函数的解决方案
在 a.js 文件中，我们使用匿名函数：
(function(){
flag = true
})()使用匿名函数虽然解决了重名问题，但是如果我们希望在 main.js 文件中，用到 flag，应该如何处理呢？
显然，另外一个文件中不方便使用，因为 flag 是一个局部变量。
这时，我们可以将需要暴露到外面的变量，使用一个模块作为出口。
3、使用模块作为出口
// 使用模块作为出口
var ModuleA = (function(){
// 1. 定义一个对象
var obj = {}
// 2. 在对象内部添加变量和方法
obj.flag = true
obj.myFunc = function(info){
console.log(info);
}
// 3. 将对象返回
return obj
})()以上代码在匿名函数内部，定义一个对象，给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可），
最后将这个对象返回，并且在外面使用了一个 MoudleA 接受。
接下来，在 main.js 中使用只需要使用属于自己模块的属性和方法即可：
// 使用模块
if(ModuleA.flag){
console.log('小明是个画家');
}
ModuleA.myFunc('小明是个画家')
console.log(ModuleA);这就是模块最基础的封装，事实上模块的封装还有很多高级的话题，幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案；
常见的模块化规范：
- CommonJS
- AMD
- CMD
- ES6 Modules
4、了解CommonJS
模块化有两个核心： 导入、导出
// CommonJS 导出
// 在a.js中：
module.exports = {
flag: true,
sum(a, b) {
return a + b
}
}
// CommonJS 导入
// 在main.js中：
let {flag,sum} = require('a.js')5、ES6的export和import
(1)export基本使用
export指令用于导出变量，比如下面的代码：
// info.js
export let name = 'lyy'
export let age = '18'
export let height = '1.75'上面的代码还有另外一种写法：
// info.js
let name = 'lyy'
let age = '18'
let height = '1.75'
export {name, age, height}(2)导出函数或类
上面我们主要是输出变量，也可以输出函数或者输出类
上面的代码也可以写成这种形式：
(3)export default
某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
这个时候就可以使用 export default
// info.js
export default function(){
conse.log('default function')
}来到 main.js 中，这样使用就可以了:
import myFunc from './info.js'
myFunc()这里的 myFunc 是自己命名的，可以根据需要命名它对应的名字
另外，需要注意：
export default 在同一个模块中，不允许同时存在多个
(4)import使用
我们使用 export 指令导出了模块对外提供的接口，就可以通过 import 命令来加载对应的这个模块了
首先，需要在HTML代码中引入两个 js 文件，并且类型需要设置为 module：
<script src="info.js" type="module"></script> <script src="main.js" type="module"></script>
import指令用于导入模块中的内容，比如main.js的代码：
import {name,age,height} from "./info.js"如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦，则可以导入模块中所有的 export 变量，
但是通常情况下我们需要给起一个别名，方便后续的使用：
import * as info from "./info.js"
console.log(info.name,info.age,info.height)