Module理解及使用

ES6的模塊化設計思想是靜態化，也就是說，在編譯的時候確定模塊的依賴關系，以及輸出輸出入的變數，而CommonJS和AMD模塊都是在運行時確定的，ES6的模塊不是物件，而是通過export顯示指定輸出的代碼，再通過import命令輸入，

// 模塊輸入
import { start,address } from 'util'

上面的模塊輸入加載了兩個方法，即使util模塊內有其它方法也不會加載，只會加載上面引入的兩個方法，這種加載稱為“編譯時加載”或靜態加載，

需要注意的是，ES6的模塊自動采取嚴格模式，不管頭部有沒有加上"use strict"都會開啟嚴格模式，嚴格模式的限制如下：

1、變數必須先宣告再使用
2、函式引數不能有同名屬性，否則報錯
3、不能使用with陳述句
4、不能對只讀屬性賦值，否則報錯
5、不能使用前綴0表示八進制數，否則報錯
6、不能洗掉不可洗掉的屬性，否則報錯
7、不能洗掉變數delete prop，會報錯，只能洗掉屬性delete global[prop]
8、eval不會在它的外層作用域引入變數
9、eval和arguments不能被重新賦值
10、arguments不會自動反映函式引數的變化
11、不能使用arguments.callee
12、不能使用arguments.caller
13、禁止this指向全域物件
14、不能使用fn.caller和fn.arguments獲取函式呼叫的堆疊
15、增加了保留字（比如protected、static和interface）

export和import命令

模塊主要有export和import構成，export規定模塊對外的介面，import用于輸入模塊提供的功能，
模塊匯出

// util模塊
// 型別
function type(a){
    return typeof a
}
// 計算
function sum(a,b) {
    return a * b 
}
// 判斷是否為陣列
function isArray(a) {
    return a instanceof Array
}
export { type,sum }  // 按需匯出

模塊匯入

import {  type,sum } from './util'
let num = sum(10,5)
console.log(num) // 50

上面兩種方式是可選的方式匯出的，也就是說，import匯入模塊的時候，只會加載export匯出的方法，其它的方法不會被import加載，并且import引入util模塊可以按需引入，引入自己需要的模塊即可，其它未引入的模塊也不會加載，這也就是靜態加載的好處，

除了export { xxx,xxx }的按需匯出外，ES6還提供了export default的默認匯出，默認匯出的方法，在import匯入的時候，不需要跟匯出名一直，可以自定義名稱接識訓出的方法，

// util模塊
// 計算
function sum(a,b) {
    return a * b 
}
// 判斷是否為陣列
function isArray(a) {
    return a instanceof Array
}

export default sum // 默認匯出

import aaa from './util'  // 匯入時名字可以自定義
let num = aaa(10,5)
console.log(num) // 50

其實這個default就是一個叫做default的變數，這個變數可以被任意命名，在import匯入的時候，取任何名稱都可以匹配上default匯出的方法，

按需和默認匯出
export { xxx,xxx }和export default默認匯出可以同時使用

// util模塊
function type(a){
    return typeof a
}

function sum(a,b) {
    return a * b 
}

function isArray(a) {
    return a instanceof Array
}

export { type,sum }
export default isArray

// 匯入
import { type,sum }from './util'  
import aaa from './util'  

模塊的整體加載

上面的匯出方法都是加載模塊內對應的方法，模塊的整體加載要使用*，也就是加載全部，語法如下

import * as util from './util';
// 在頁面中使用
let num = util.sum(10,5)
console.log(num)  // 50

這種寫法是將模塊整體加載，用*指定一個物件，所有輸出的值都加載在這個物件上面，通過該物件.方法名來獲取對應方法，
需要注意的是，ES6的模塊是靜態分析的，不允許對模塊進行改變，所以下面寫法是不允許的:

util.sum = 'hello' // 報錯
util.sum = function () {} // 報錯

模塊繼承

模塊之間也是可以繼承的，假設A模塊繼承了B模塊

// A模塊
function sum(a,b) {
    return a * b 
}

function isArray(a) {
    return a instanceof Array
}

export * from 'B'  // 輸出B模塊的所有屬性和方法，忽略模塊內的default方法
export { sum } 
export default isArray

export * 命令會忽略B模塊的default方法，因為A模塊內部有自己的default方法，

模塊的重命名

// util模塊
export { sum as s }
// 頁面
import { s } from './util'  // 引入命名后的方法

模塊按需引入import()

正常情況下import是需要在頁面頂層引入的，并且import的引入執行的優先級是最高的，例如：

let s = sum(10,5)
import { sum } from './util' 

上面這種寫法是允許的，程式會執行import的引入，然后再執行let s = sum(10,5)，但這種寫法會默認匯入模塊，并且是在頂層匯入，
es6提供了動態匯入功能：import()，當程式執行到該陳述句的時候才會匯入，并且是同步執行，import()回傳的是一個Promise，所以可以使用then方法和async-await，
Promise寫法

import('./util.js')
.then(el=>{
   console.log(el.t(100));  // number
   console.log(el.sum(10,5));  // 50
})

async-await寫法

async function getImport(){
      let { sum } = await import('./util.js')
      console.log(sum(2,8));
}
getImport()  // 16

也可以通過解構的方式獲取

import('../module/import.js')
.then(({sum})=>{
     console.log(sum(20,5));  // 100
})

如果模塊是default默認匯出，其實default就是一個鍵名

import('../module/import.js')
.then((e)=>{
   console.log(e.default([1,2,3]));  // true
})

default也可以通過具名的形式匯入（取別名）

import('../module/import.js')
.then(({default : isA})=>{
     console.log(isA([1,2,3]));  // true
})

import.meta

在使用一個模塊時，有時候需要知道該模塊本身的資訊（比如模塊的路徑），import命令新增了一個元屬性import.meta，可以回傳當前模塊的資訊，
注意：import.meta只能在模塊內使用，在模塊外使用會報錯

// util模塊
function sum(a,b) {
    return a * b 
}

function getMeta(){
    return import.meta  // 獲取當前模塊的元資訊
}

export { sum,getMeta }

// console.log(import.meta);  // import.meta只能在模塊內使用，在模塊外部使用會報錯
import('./util.js')
.then(el=>{
      console.log(el.getMeta());  // {url: 'http://127.0.0.1:5500/module/import.js', resolve: ?}
})

案例原始碼：https://gitee.com/wang_fan_w/es6-science-institute

如果覺得這篇文章對你有幫助，歡迎點亮一下star喲

標籤：其他

上一篇：GraphQL (三) Authentication 和 Authorication

下一篇：基于jsplumb構建的流程設計器