ES6模組化

張最棒發表於2020-10-25

Es6模組化的優點

  • 預宣告的方式匯入(在一開始確定依賴關係)
  • 多種匯入匯出方式

Es6缺點:某些情況下效率低.相比CommonJs依賴延遲申明兩者優缺點正好相反。

Es6引入入口檔案:使用type屬性來告知我這個是一個模組

<script src="./index.js" type="module"></script>

 

Es6 分為基本匯出和預設匯出 兩種方式可以同時存在

 

  • 基本匯出

基本匯出類似於CommonJs的exports。

語法: export 宣告表示式 或 export {具名符號}

//a.js檔案

export var a = 1; export function print() { console.log(a); } export class Message { } let name = 'zwq'; let age = 18; // 注意這裡的{}不是一個物件,只是一種特殊的語法,表示匯出括號裡面的內容 export { name, age } /** * 上面的匯出的內容有 * 變數a * 函式print * 類Message * 變數name * 變數age */

 

  • 基本匯入

由於使用的是依賴預載入,因此匯入任何其他模組,匯入程式碼必須當時到所有程式碼之前

語法:import {具名符號列表} from "模組路徑"

匯入時可以使用as關鍵字進行重新命名

匯入時的符號是常量不可修改,不能重新賦值

匯入時使用 * 匯入匯出的全部內容儲存在一個物件中,這裡要使用as關鍵字對*進行重新命名

//index.js入口檔案

import{name,age,a as moduleA} from "./a.js"; import {b} from "./b.js";
 import * as Amoudle from "./a.js"
var a = 5;
console.log(a);
console.log(name,age);
console.log(b);
console.log(moduleA);
 console.log(Amoudle);
 

 

  • 預設匯出

每個模組除了允許有多個基本匯出之外,還允許有一個預設匯出

預設匯出類似於CommonJs的module.exports,由於只有一個,因此無需具名

語法:export default 預設匯出的資料 或 export {預設匯出資料 as default}

//a.js檔案

//
基本匯出 a export var a = 1; export var b = 2; export var c = 3 // 預設匯出 a變數的值 export default a;

 

 

//b.js檔案
var
num = 1; export default { print(){ console.log(num); }, name:'zwq', age:18, sayName(){ return this.name } }

 

 

 

  • 預設匯入

語法:import 隨便起一個變數名 from "檔案路徑"

  • 預設匯入和基本匯入一起使用

語法:import 預設匯入,{基本匯入} from "檔案路徑"

 

import m from "./a.js"
import bMoudle from "./b.js"
// 匯入所有的匯出(基本匯出和預設匯出-->default物件)
import * as all from "./a.js"
// 將預設匯出放在def裡,將基本到處放在a,b變數裡
import def,{a,b} from "./a.js"
console.log(a);
console.log(m);
console.log(bMoudle.sayName());

console.log(all);

 

 

 

相關文章