在ES6之前, 社區(qū)制定了一些模塊加載方案, 最主要的有CommonJS和AMD兩種. 前者用于服務器,后者, 用于瀏覽器

ES6模塊的設計思想是盡量靜態(tài)化, 使得編譯時就能確定模塊的依賴關系

ES6模塊不是對象, 而是通過export命令顯示指定輸出的代碼,再通過import命令輸入.

// ES6模塊

import { stat, exists, readFile } from 'fs'

上面代碼的實質(zhì)是從fs模塊加載3個方法, 而不加載其他方法. 這種加載成為"編譯時加載"或"靜態(tài)加載', 即ES6可以在編譯時就完成模塊加載

注意:? ? ?

?????????在ES6模塊中, 頂層的this指向undefined, 不應該在頂層代碼中使用this.

export 命令

export 命令用于規(guī)定模塊的對外接口.?

一個模塊就是一個獨立的文件, 這個文件內(nèi)部的所有變量,外部無法獲取. 如果希望外部能夠讀取模塊內(nèi)部的某個變量,就必須使用export 關鍵字輸出該變量.

// 下面js文件使用export輸出變量

    // profile.js
    export var firstName = 'wei'
    export var lastName = '健力寶'
    export var year = '1958'


    // 與前一種寫法是等價的, 優(yōu)先考慮這種寫法. 可以再腳本尾部一眼看清楚輸出哪些變量
    var firstName = 'wei'
    var lastName = '健力寶'
    var year = '1958'    
    export {
        firstName,
        lastName,
        year
    }

    // 除了輸出變量,還可以輸出函數(shù)或class
    export function multiply(x,y){
        return x * y
    }
    
    

? ? ? ? 使用as關鍵字重命名

    function v1() { ... }
    function v2() { ... }
        
    export {
        v1 as streamV1,
        v2 as streamV2,
        v2 as streamLatestVersion
    }
    // 上面代碼使用as關鍵字重命名了函數(shù)v1和v2的對外接口,重命名后v2可以用不同的名字輸出

? export 命令規(guī)定的是對外的接口, 必須與模塊內(nèi)部的變量建立一一對應的關系

// 報錯
export 1

// 報錯
var m = 1
export m

// 上面兩種寫法都會報錯, 因為沒有提供對外的接口. 
// 第一種寫法直接輸出1, 第二種寫法通過變量m依然直接輸出1. 1只是一個值, 不是接口


// 正確寫法
// 寫法1
export var m = 1

// 寫法2
var m = 1
export { m }

// 寫法3
var n = 1
export { n as m}
 
// 以上三種都是正確的, 規(guī)定了對外的接口m. 其他腳本通過這個接口取得值1. 
// 它們的實質(zhì)是, 在接口名與模塊內(nèi)部變量之間建立一一對應.

? export 語句輸出的接口與其對應的值是動態(tài)綁定關系, 通過該接口可以渠道模塊內(nèi)部實時的值

export var foo  = 'bar'

setTimeout(() => foo = 'baz', 5000)

// 上面代碼輸出變量foo, 值為bar, 5000ms之后變成baz.
// 這一點和CommonJS不同, CommonJS模塊輸出的是值的緩存.

?最后, export命令可以出現(xiàn)在模塊的任意位置,只要處于模塊頂端就可以.? 如果處于塊級作用域內(nèi),? ?就會報錯.?

function  foo () {
    export default 'bar'
}

foo()
// 報錯

import 命令

使用export 命令定義了模塊的對外接口后, 其他js文件可以通過import命令加載這個模塊.

    // main.js
    import { firstName, lastName, year } from './profile'
    
    // from指定的位置可以是相對位置也可以是絕對位置.

    /*
        import 命令用于加載profile.js文件 import命令接受一個對象,里面指定要從其他
        模塊導入的變量名, 大括號中的變量必須與被導入模塊對外接口的名稱相同.
    */

?如果要為輸入的變量重新取一個名字,要在import 命令中使用as關鍵字

import { firstName as surname } from './profile'

? import 命令具有提升效果, 會提升整個模塊的頭部并首先執(zhí)行

foo()

import { foo } from 'module'

// 不會報錯, 因為import的執(zhí)行早于foo的調(diào)用
// 本質(zhì)是,import命令是在編譯階段執(zhí)行的,在代碼運行之前

模塊的整體加載

除了指定加載某個輸出值, 還可以整體加載(星號*)來指定一個對象.

    // circle.js
    export function area(radius) {
        return Math.PI * radius * radius
    }

    export function circumference(radius) {
        return 2 * Math.PI * radius
    }

    // main.js
    import { area, circumference }  from './circle'
    console.log('圓面積', area(4) );
    console.log('圓周長', circumference(14) )

    // 整體加載的寫法
    import * as circle from './circle'
    console.log('圓面積', circle.area(4) );
    console.log('圓周長', circle.circumference(14) );

export default 命令

export default 命令為模塊指定默認輸出

// export-default.js
export default function() {  // 默認輸出是一個函數(shù)
    console.log('foo')
}


// import-default.js
import customName from './export-default'

customName() // 輸出foo

//上面的import命令可以用任意名稱指向export-default輸出的方法.這時import不需要大括號


// export default用在非匿名函數(shù)也是可以的
export default function foo() {  
    console.log('foo')
}

import foo from 'foo'
// 對應的import語句不需要使用大括號


// 或者寫成

function foo() {
    console.log('foo')
}

export foo
// 需要使用大括號

本質(zhì)上, export default 就是輸出一個叫做default的變量或方法, 然后系統(tǒng)允許我們?yōu)樗∪我饷?

export和import的復合寫法

如果在一個模塊中先輸入后輸出同一個模塊,import語句可以與export語句寫在一起.文章來源地址http://www.zghlxwxcb.cn/news/detail-431939.html

export { foo, bar?} from 'module'

//等同于

import { foo, bar } from 'module'
export { foo, bar }

到了這里，關于Module的語法, JS中的 export 和 import的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！