一.模塊化前世今生：
??1.模塊化就是把單獨的一個功能封裝到一一個模塊(檔案)中,模塊之間相互隔離,但是可以通過特定的介面公開內部成員,也可以依賴別的模塊，模塊化開發的好處是方便代碼的重用，從而提升開發效率，期方便后期的維護，
??2.以前瀏覽器常用的模塊化規范有 AMD（代表Require.js）和 CMD（代表Sea.js），但是都落伍了，服務端有 CommonJS規范，不過也不是標準的，最終ES6官方提出了大一統的模塊化規范，這也是目前瀏覽器與服務端的通用規范，
??3.Es6模塊化規范中定義:每個js檔案都是一個獨立的模塊，匯入模塊成員使用import關鍵字，暴露模塊成員使用export關鍵字，
?? 4.下面請看詳細的使用，
二.詳細用法：
??首先，我同一個目錄下新建一個export.js檔案模擬其為要匯出的模塊，再建一個import.js檔案模擬其要匯入其它模塊，同時為了在瀏覽器運行，新建一個index.html檔案，并引入import.js檔案，需要注意的是index.html引入import.js時要指定型別type="module"才能使用模塊化，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 看這 -->
<script type="module" src="./import.js"></script>
</head>
<body></body>
</html>
1.匯出匯入基本變數：
直接匯出整句匯出，匯入變數名要跟匯出的模塊變數名一一對應否則報錯，同時用{}包裹匯入的變數名：
export.js內容：
export let name = 'jack';
export let age = 18;
import.js內容
// 名稱要跟匯出的模塊名稱一一對應，同時from后為匯入模塊的路徑
import {name,age} from './export.js'
console.log(`我叫${name},今年${age}歲`);
運行結果：
2.匯出匯入基本變數（2）：
也可以先定義變數名，再直接匯出變數名，
export.js內容：
let name = 'jack';
let age = 18;
export {
name,
age
}
import.js內容
import {name,age} from './export.js'
console.log(`我叫${name},今年${age}歲`);
運行結果：
3.as對變數起別名：
匯入的時候通過 as 可以修改變數名字，
export.js內容：
let name = 'jack';
let age = 18;
export {
name,
age
}
import.js內容
import {name as myName,age} from './export.js'
console.log(`我叫${myName},今年${age}歲`);
運行結果：
4.匯入變數不可修改：
匯入變數是只讀的，不可修改，
export.js內容：
let name = 'jack';
let age = 18;
export {
name,
age
}
import.js內容
import {name as myName,age} from './export.js'
age = 20;
console.log(`我叫${myName},今年${age}歲`);
運行結果：
5.匯入參考型別可修改值：
匯入參考型別（物件，陣列）可修改值
export.js內容：
let obj = {a:1,b:2};
let arr = [0,1,2];
export {
obj,
arr
}
import.js內容
import {obj,arr} from './export.js'
obj.a = 100;
arr[0] = 200;
console.log(obj,arr);
運行結果：
6.基本匯入匯出函式：
可以匯入匯出函式，匯入的函式存在宣告提升，
export.js內容：
export function add(a,b){
console.log(a+b);
}
import.js內容
myAdd(1,2);
import {add as myAdd} from './export.js'
運行結果：
7.匯出多個函式并起別名：
匯出多個函式，同時也可以在匯出的時候通過as起別名，
export.js內容：
function add(a,b){
console.log(a+b);
}
function sub(a,b){
console.log(a-b);
}
export {add as myAdd , sub as mySub}
import.js內容
import {myAdd,mySub} from './export.js'
myAdd(2,3);
mySub(6,3);
運行結果：
8.靜態匯入：
模塊匯入是靜態匯入的，不能使用那些什么需要判斷呀什么變數保存呀的需要運行時才能確定匯入的，必須按規定寫法，
export.js內容：
function add(a,b){
console.log(a+b);
}
function sub(a,b){
console.log(a-b);
}
export {add as myAdd , sub as mySub}
import.js內容
let path = './export.js'
import {myAdd,mySub} from path;
myAdd(2,3);
mySub(6,3);
運行結果：
9.靜態匯入（2）：
模塊匯入是靜態匯入的，不能使用那些什么需要判斷呀什么變數保存呀的需要運行時才能確定匯入的，必須按規定寫法，
export.js內容：
function add(a,b){
console.log(a+b);
}
function sub(a,b){
console.log(a-b);
}
export {add as myAdd , sub as mySub}
import.js內容
if(true){
import {myAdd,mySub} from './export.js'
}
myAdd(2,3);
mySub(6,3);
運行結果：
10.（*）整體加載：
在匯入的時候用（*）號指定一個物件，同時用 as 給這個物件起別名，那么匯出的全部變數都是這個物件的某個屬性，
export.js內容：
function add(a,b){
console.log(a+b);
}
function sub(a,b){
console.log(a-b);
}
let arr = [1,2,3];
export {add , sub , arr}
import.js內容
import * as obj from './export.js'
obj.add(2,3);
obj.sub(6,3);
console.log(obj.arr);
運行結果：
11. 默認輸出：
export default 指定默認輸出，就是匯出的時候為匯出一個匿名函式，而在匯入的時候就可以指定隨便起一個名字都能實作匯入，這樣就不需要知道原模塊輸出的函式名，大大方便使用，且匯入的時候不再需要{}包裹，要注意的是，一個js檔案（模塊）只能存在一個export default ：
export.js內容：
export default function(a,b){
console.log(a+b);
}
import.js內容
import fn from './export.js'
fn(1,2);
運行結果：
12. 默認輸出（2）：
也可以直接默認輸出一個物件：
export.js內容：
export default {
age:18,
add(a,b){
console.log(a+b);
}
}
import.js內容
import obj from './export.js'
obj.add(1,2);
console.log(obj.age);
運行結果：
13.默認輸出（3）：
也可以默認輸出一個建構式或者class類：
export.js內容：
export default function(name,age){
this.name = name;
this.age = age;
}
import.js內容
import Person from './export.js'
var zhangsan = new Person('zhangsan',19);
console.log(zhangsan);
運行結果：
14.復合寫法：
如果在一個模塊中，匯入一個模塊后又匯出同一個模塊，可以采用復合寫法：
原來寫法：
import {add} from './add.js'
export {add}
可以直接這樣簡寫：
export {add} from './add.js'
三.總結：
?? 上面就是es6模塊一些常用的語法了，shiε≡?(?>?<)? ，總而言之，Es6模塊化規范中定義每個js檔案都是一個獨立的模塊，匯入模塊成員使用import關鍵字，暴露模塊成員使用export關鍵字，這是ES6官方提出了大一統的模塊化規范，這也是目前瀏覽器與服務端的通用規范，
?? 那么，下次見啦~ 對了，今天中秋節，送句話給你們?🌕???：一生相識，來自天意；一份真情，來自秋季；一份美麗，來自惦記；一句祝福，來自心底，愿健康平安快樂幸福永遠伴隨您，祝你中秋節快樂！不是復制的，讀書人能叫復制么，叫借鑒(^ ▽ ^)，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301980.html
標籤：其他