ES6的export模組 import模組

2021-10-02 20:23:12 字數 2906 閱讀 9183

參考：

es6的模組分為匯出（export）和匯入（import）兩個模組

1：es6模組自動開啟嚴格模式，不管你有沒有在模組頭部加use strict

2：模組可以匯入匯出各種型別的變數，如函式、物件、字串、陣列、布林值、類等

3：每個模組都有自己的上下文，每個模組內宣告的變數都是區域性變數，不會汙染到全域性作用域

4：每乙個模組只載入一次（單例的），若再去載入同目錄下同檔案，直接從記憶體中讀取

注意

目前在使用模組的匯入匯出功能時，需要使用babel轉碼才能用export和import, 也就是需要把es6轉成es5， 建議直接在vue中使用

模組可以匯入匯出各種型別的變數，如函式、物件、字串、陣列、布林值、類等

注意

匯出的函式宣告與類宣告必須要有名稱（export default 命令除外）

example.js檔案

export const pi = 3.14;


export let str = "str";


export let num = 10;


export function test() 


export class myclass 


export let obj = ;


export let arr = ["item1", "item2"];


const people = ;


//乙個模組只能有乙個預設匯出


export default people;
在vue中通過import匯入需要的內容，匯入和匯出的順序可以不一致

注意

1：通過export方式匯出時，在import時需要加{}，而通過export default匯出時則不需要

2：不需要使用的變數可以不匯入

3：可同時匯入通過export和export default匯出的內容，若export和export default同時存在則可以用下面兩種方式匯入

4：可以通過as重新定義匯入匯出的變數名

vue.js檔案

建議使用大括號指定所要匯出的內容，也就是物件匯出

let num = 10;


let obj = ;


export ;
在使用匯入時（順序可不一致）

import  from './example';
const obj = 


};export default obj;
在使用匯入時（不能加花括號{}）

import example from './example';
注意：可以通過as重新定義匯入匯出的變數名

1：在乙個檔案或模組中，export、import可以有多個，export default最多只能有乙個

export default a;


export default b; //錯誤 只能有乙個
2：通過export方式匯出，在匯入時要加{}，export default則不需要並且可以使用任意變數接收

export default b;


import *** from "./***.js"; // 不需要加{}， 可使用任意變數接收
3：export default中的default對應的是匯出的變數不能是表示式，但export可以直接匯出表示式

export default const pi = 3.14; //錯誤 只能是匯出變數，不能是表示式
1：唯讀屬性：不允許在載入模組的指令碼裡面改寫import變數型別為基本型別的變數，也不允許改寫介面的引用指向，但可以改寫引用指向的屬性值

example.js檔案

let num = 10;


let obj = ;


export ;


vue.js
2：單例模式：多次重複執行同一句import語句，那麼只會執行一次，而不會執行多次。import同乙個模組，宣告不同變數引用，則會宣告對應變數，但只執行一次import

import  "./***.js";


import "./***.js";


//相當於 import "./***.js" 了一次


import from "./***.js";


import from "./***.js";


// 相當於 import from "./***.js";
3：靜態執行特性：import是靜態執行，所以不能使用表示式和變數

//錯誤


import from "./***.js";


//錯誤


let module = "./***.js";


import from module;


//錯誤


if(true) from "./***.js";


}else from "./***.js"


}

ES6模組的import和export用法總結

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

ES6模組的import和export用法總結

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

ES6模組的import和export用法總結

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