在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画 实现等，那个时候代码还是很少的。
以前的代码 直接将代码写在<script>标签中即可
随着ajax异步请求的出现，慢慢形成了前后端的分离
为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维 护。但是这种维护方式，依然不能避免一些灾难性的问题。
例如下面三个JS代码：
user1.js
var name = "bihu"; var age = 18; var flag = false; var add = function(a,b){ return a + b; }
user2.js
var name = "bihu"; var age = 18; var flag = false; var add = function(a,b){ return a + b; }
Util.js
if (flag) { console.log("我真是帅哥"); }
学过的都知道，他打印还是不打印这句话，取决于 你引入JavaScript的顺序，因为这里变量名冲突了。
如果开发大项目 怎么可能也是写在一起，如果有100个JS文件 但凡有一个冲突 你就很难找了。
解决方案：
1 . 最原始的方法就是使用 “闭包”
2 .前端模块化开发
幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
常见的模块化规范： CommonJS、AMD、CMD，也有ES6的Modules
ES模块化的 导出 和 导入
首先 你写的JS 文件 ，引用文件的时候 type 写 module 即可,例如：
<script src="js/A.js" type="module"></script> <script src="js/B.js" type="module"></script> <script src="js/C.js" type="module"></script>
那么A 和 B 和 C 之间，他们都不是独立的，我在 ABC这三个js文件中写入： var i = 1; 、var i = 2;、 var i = 3;
如果我打印i ，会发现报错：
<!DOCTYPE html> <html lang="zh"> <head> <title></title> </head> <body> <script src="js/A.js" type="module"></script> <script src="js/B.js" type="module"></script> <script src="js/C.js" type="module"></script> <script type="text/javascript"> console.log(i) </script> </body> </html>
会说i没定义，因为每个js都是一个模块 独立的，所以呢取不到 变量 i 的值。
解决方案就是 导入 和 导出：【export 和 import】
导出：
导出有很多种方式，导出的数据可以是变量、函数、对象...
第一种导出方式： 【个人强烈推荐这种】
如果我要访问 a中的 变量 i 【值是 1 】：
例：
export｛
aaa,bbb,ccc,ddd
｝
A.js：var i = 1;
//直接写变量名即可，ES6写法 别忘了
export{i}
这样就吧一个模块中的数据导出了，导出了之后，如果你要用导出的值，那么你在要用的模块上这样导入：
导入：
这里新建Show.js 引入的时候也是module，然后在Show.js中导入A.js 导出的值，然后打印 i
import {i} from "./A.js"
//这里已导入 i
//接下来直接打印：
console.log(i)
注意！ 这里只能导入A.js的 i ，因为只有你模块导出了 我才能 导入 你模块 导出 的值！！
第二种方式导出：【直接导出变量】
直接
export var xxx = aaa;
export var yyy = bbb;
export var zzz = ccc;
这样既可...
第三种方式导出：【直接导出 函数、类】
直接导出函数：
export function add(num1,num2){
return num1 + num2;
}
直接导出类：
var i = 1;
//直接写变量名即可，ES6写法 别忘了
export{i}
export class Person{
add(num1,num2){
return num1 + num2;
}
}
然后你在Show.js中导入：
import {Person} from "./A.js"
//这里已导入 Person
//接下来直接赋值 然后使用函数：
const show = new Person();
console.log(show.add(1,9));
还有一种：export default
导入默认值，这个导入的时候可以任意取名字，但是只能导出一个 export default 。【export default在同一个模块中，不允许同时存在多个。】
某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用export default
A.js :
var str = "广东省";
//只能导出一个 默认的 export default
export default str;
Show.js:
//因为导出的是 默认值 ，所以下面 可以随便起名 不用花括号 下面起的是 address：
import address from "./A.js"
//下面打印出来的就是‘广东省’了
console.log(address)
因为只能有一个default ，那么你可以一起携带其他，例如：
A.js :
var str = "广东省";
var i = 111;
export default str;
export {
i
}
Show.js:
//默认值直接取名，但是i不能取名 且 加 花括号！
import address, {i} from "./A.js"
//下面打印出来的就是‘广东省’ 和 1 了 了
console.log(i)
console.log(address)
导出说了那么多种，但是第一种 和 默认用的多，
导入有一种写法：导入全部值 且 取 别名
如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
通过*可以导入模块中所有的export变量
但是通常情况下我们需要给*起一个别名，方便后续的使用:
A.js:
var name = "BiHu";
var age = 18;
var sex = ‘男‘;
export {name,age,sex}
Show.js:
//这里导入全部，用 as 取个别名
import * as all from "./A.js"
//下面打印 直接 all.x即可：
console.log(all.name)
console.log(all.age)
console.log(all.sex)
所以这就是 Js 模块化开发. 这个要掌握。