Es6模塊化

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 "文件路徑"

• 基本導出直接把默認的也一起導出

語法 export {基本導出，默認導出 as default}

 

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);

 

 

 如果只是運行一下模塊內容，沒有導出的內容，直接使用  import  "模塊路徑"

 

拓展：當需要對對個模塊進行整合到一個模塊時（將多個模塊導入到一個模塊，在這個模塊進行導出）export {導出具名符號} from “文件路徑” 

export {a,b} from "./m1.js"  導出m1文件的a和b

export {k,default,a as m2A} form "./m2.js"    導出m2文件的 k,m2的默認導出，m2的a並改名為m2A

export const r = "自己本模塊的內容"