es6中import和export的用法

在日常開發中，hms經常會遇到以下這些語句:

import

from
'***'
import *** from
'***'
import
('../***'
)let *** =
'x';
export
export
class
***export
default
exports.
post()
module.exports.init = init;

1. es6模組

import和export是es6模組中的兩個命令。

es6模組功能主要有兩個命令構成：export和import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

在es6前，模組載入最主要的有 commonjs 和 amd兩種。前者用於伺服器，後者用於瀏覽器。

es6 模組的設計思想是盡量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。

2. export

export命令用於規定模組的對外介面。即輸出模組內部變數（方法、類）。

// 1. 直接輸出變數（方法、類）

export
var m =1;
export
function
multiply
(x, y)
;// 2. 使用大括號指定所要輸出的一組變數（方法、類）
var m =1;
export
;// 3. as關鍵字重新命名
// 重新命名後，v2可以用不同的名字輸出兩次
functionv1(
)functionv2(
)export
;

export命令可以出現在模組的任何位置，只要處於模組頂層就可以，不能處於塊級作用域內部。

3. import

使用export命令定義了模組的對外介面以後，其他 js 檔案就可以通過import命令載入這個模組。import命令接受一對大括號，裡面指定要從其他模組匯入的變數名。大括號裡面的變數名，必須與被匯入模組對外介面的名稱相同。

// 1. 引入變數（方法、類）-（逐一載入）

import
from
'./profile.js'
;// 2. as關鍵字重新命名
import
from
'./profile.js'
;// 3. 整體載入
import
*as circle from
'./circle'
;

from後面是檔案路徑（相對路徑、絕對路徑均可，可省略.js猴嘴；模組名，已配置模組位置）

import命令提公升至頂部先執行（編譯階段執行）

import命令靜態執行，不能使用表示式和變數

重複執行同一句import命令，只會執行一次

4. export default

export default就是輸出乙個叫做default的變數或方法，系統允許自定義命名

// 預設輸出乙個函式

export
default
function()
// 引用並指定名字
import customname from
'./export-default'
;

5. import()

為了實現在執行中載入模組，引入了import()函式，實現了動態載入。

import

('./mymodule.js').
then((
)=>
);

import()返回乙個promise物件，import()載入模組成功以後，這個模組會作為乙個物件，當作then方法的引數。

import()類似於node的require方法，區別主要是前者是非同步載入，後者是同步載入

import()通常用於按需載入、條件載入、動態的模組路徑

// 1. 

// 引入模組的某些變數（方法、類），配合4、5使用
import
from
'***'
// 2. 
// 引入模組的預設變數（方法、類），配合6使用
import *** from
'***'
// 3.
// 實現動態載入，適用於按需載入等
import
('../***'
)// 4.
// 輸出模組的變數（方法、類），對應引入方法為1
let *** =
'x';
export
// 5.
// 輸出模組的變數（方法、類），對應引入方法為1
export
class
***// 6.
// 輸出模組預設的變數（方法、類），對應引入方法為2
export
default
// 7.
// 待更新
exports.
post()
// 8.
// 待更新
module.exports.init = init;

使用es6中import和export報錯

在學習import和export時，寫了乙個小demo進行測試 import test from test.js test script export default function 可是會報錯cors，因為是在本地進行測試的。所以會有同源問題。把 放到伺服器上後，沒了同源問題，但是會報 inde...

vue中import的ES6語法

2.es6模組與commonjs和amd模組載入的不同。3.export命令 4.import命令 5.模組的整體載入 get到很多的新姿勢，然而並不能解釋import vue from vue和其他 是什麼意思。解釋 之前，先來看我的專案文件 這5行 位於main.js中 那麼現在我對上述 一一作...

Es6中的export和import的區別

export可以使import一次匯入多個，如下 匯出 export str hello world export function f 匯入 import str,f from demo1.js 需要把匯入的物件裝進 括號 裡 或者分開單獨寫也可以 import str from demo1.js...