ES6模組之export和import詳解

2021-08-04 03:55:45 字數 2842 閱讀 7523

es6中的模組即使乙個包含js**的檔案，在這個模組中所有的變數都是對其他模組不可見的，除非我們匯出它。es6的模組系統大致分為匯出（export）和匯入（import）兩個模組。

你可以匯出所有的最外層

函式、類以及var、let或const宣告的變數。

es6模組只支援靜態匯入和匯出，你只可以在模組的最外層作用域使用import和export，不可在條件語句中使用，也不能在函式作用域中使用import。

所有匯出的識別符號一定要在源**中明確地匯出它們的名稱，你不能通過編寫**遍歷乙個陣列然後用資料驅動的方式匯出一堆名稱。如下匯出是錯誤的。

function squre() {};


if(true) ;


}

es6的匯出分為名字匯出和預設匯出

名字匯出可以在模組中匯出多個宣告。

//------ lib.js ------


export const sqrt = math.sqrt;


export function square(x) 


export function add (x, y) 


//------ main.js ------


import from 'lib';


console.log(square(10)); //100


console.log(add(2,4)); //6
這樣匯入的變數名必須和匯出的名稱一致。以上對於每乙個要匯出的變數都加了export，我們也可以直接匯出乙個列表，例如上面的lib.js可以改寫成：

//------ lib.js ------


const sqrt = math.sqrt;


function square(x) 


function add (x, y) 


export
export列表可以在模組檔案最外層作用域的每一處宣告，不一定非要把它放在模組檔案的末尾。

也可以直接匯入整個模組，此時的main.js模組將變成這樣。

//------ main.js ------


import * as lib from 'lib';


console.log(lib.square(10)); //100


console.log(lib.add(2,4)); //6
乙個模組只能有乙個預設匯出，對於預設匯出，匯入的名稱可以和匯出的名稱不一致，這對於匯出匿名函式或類非常有用。

//------ myfunc.js ------


export default function() ;


//------ main.js ------


import myfunc from 'myfunc';


myfunc();
注意這裡預設匯出不需要用{}。

當然也可以使用混合的匯出。

//------ lib.js ------


export default function() ;


export function each() ;


//------ main.js ------


import _, from 'lib';
為了解決匯出命名衝突的問題，es6為你提供了重新命名的方法解決這個問題，當你在匯入名稱時可以這樣做： 

// 這兩個模組都會匯出以`flip`命名的東西。


// 要同時匯入兩者，我們至少要將其中乙個的名稱改掉。


import from "eggs.js";


import from "real-estate.js";
同樣，當你在匯出的時候也可以重新命名。你可能會想用兩個不同的名稱匯出相同的值，這樣的情況偶爾也會遇到： 

function v1() 


function v2() 


export ;
對於預設匯出，只是匯出了乙個特殊的名字叫 default，你也可以就直接用他的名字，把它當做命名匯出來用，下面兩種寫法是等價的： 

import  from 'lib';


import foo from 'lib';
也可以把名稱as為default來預設匯出：

//------ module1.js ------


export default 123;


//------ module2.js ------


const d = 123;


export ;

有時候為了避免上層模組匯入太多的模組，我們可能使用底層模組作為中轉，直接匯出另乙個模組的內容如下：

//------ myfunc.js ------


export default function() ;


//------ lib.js ------


export * from 'myfunc';


export function each() ;


//------ main.js ------


import myfunc, from 'lib';

這樣main.js只需匯入lib模組即可，雖然myfunc模組從lib模組匯出，但是lib卻不能使用myfunc模組的內容。

ES6模組之export和import詳解

es6中的模組即使乙個包含js 的檔案，在這個模組中所有的變數都是對其他模組不可見的，除非我們匯出它。es6的模組系統大致分為匯出 export 和匯入 import 兩個模組。你可以匯出所有的最外層函式 類以及var let或const宣告的變數。es6模組只支援靜態匯入和匯出，你只可以在模組的最...

ES6的export模組 import模組

參考 es6的模組分為匯出 export 和匯入 import 兩個模組 1 es6模組自動開啟嚴格模式，不管你有沒有在模組頭部加use strict 2 模組可以匯入匯出各種型別的變數，如函式 物件 字串 陣列 布林值 類等 3 每個模組都有自己的上下文，每個模組內宣告的變數都是區域性變數，不會汙...

ES6模組的import和export用法總結

es6之前已經出現了js模組載入的方案，最主要的是commonjs和amd規範。commonjs主要應用於伺服器，實現同步載入，如nodejs。amd規範應用於瀏覽器，如requirejs，為非同步載入。同時還有cmd規範，為同步載入方案如seajs。es6在語言規格的層面上，實現了模組功能，而且實...