模塊化開發的必要性
比如一個項目由兩個人開發，小明在文件aaa.js裏邊定義了一個很普通的參數var flag=true
小紅在開發ccc.js是也定義了 flag 並且賦值爲flase,在小明開發了aaa，bbb之後，等到開發mmm的時候，需要用到flag參數，小明並沒有改過這個參數，於是他直接在mmm.js裏直接調用
// 小明的代碼 mmm.js
if (flag) {
console.log("mmmmm-");
}
但是index.html運行之後，控制檯沒有打出mmm.js文件中console.log的內容，接着他排查代碼發現，是小紅重新給這個參數賦值了。
對於我們這個代碼來說，可能排查很快，真實項目中代碼動輒幾萬幾十萬行代碼，這個時候如果排查代碼就很難了，白白增加了很多工作量，而且自己的代碼看起來已經很難了，再去讀別人代碼，簡直是地獄。
爲了解決這種全局變量同名類似的問題，經過發展提出了模塊化的概念。現在前端模塊化已經很成熟了。如今常用的模塊化規範有以下幾種：
CommonJS、AMD、CMD，也有ES6自帶的Module
ES6模塊化的導入和導出
引用js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6模塊</title>
</head>
<body>
<script src="./export.js" type="module"></script>
<script src="./import.js" type="module"></script>
</body>
</html>
（自己的理解，不知道對不對）
引入js文件的時候，加上type="module"之後，相當於給該文件的代碼申請一塊單獨的存儲空間，代碼運行的時候就在它私有的存儲空間上跑，別人也訪問不了。
那又引出下一個問題，這樣單獨的存儲空間，那怎樣別人也能用你定義的參數呢？那就用到了導入導出。
導入導出
直接看下代碼，瞭解下幾種導出和導入方式
// export.js文件
var flag = true;
if (flag) {
console.log("aaaaa");
}
// 導出方式1
export {
flag
}
// 導出方式2
export var num = 1000;//
// 導出函數
export function sum(num1, num2) {
return num1 + num2;
}
// 導出Class，class也可以提前創建好
export class Person{
constructor(age, name) {
this.age = age;
this.name = name;
}
weight
height
run() {
console.log("呼吸");
}
}
// export default 同一模塊只能存在一個,可以讓導入的文件自定義導入的名稱
const addr = "北京市"
export default addr;
// import.js文件
import {flag} from "./export.js"
import {num} from "./export.js"
import {Person} from "./export.js"
import userdefineAddress from "./export.js" //導入default，可以自定義導入參數
import * as aaa from "./export.js" //導入 模塊全部導出內容，用aaa.訪問
if (flag) {
console.log("bbbb");
console.log("num:" + num);
Person.age = 12;
console.log("person:" + Person);
console.log("person,age:" + Person.age);
console.log("default address: " + userdefineAddress);
}
運行效果圖如下：
