es6中的import導入模塊 和 export導出模塊

一、定義

功能：用于導入和導出模塊的內(nèi)容。
靜態(tài)加載：import 是靜態(tài)加載模塊的方式，在編譯階段進行檢查和解析，使得工具可以進行優(yōu)化和靜態(tài)分析。
異步加載：支持異步按需加載模塊。
作用域：import 和 export 存在塊級作用域，可以靈活地控制變量和函數(shù)的可見性。
瀏覽器支持：需要使用打包工具（如 webpack 或 Rollup）將 ES6 模塊轉(zhuǎn)換為瀏覽器可識別的格式，或者在現(xiàn)代瀏覽器中使用

二、使用

1.默認導出導入

// 導出一個默認的值或?qū)ο?
export default myModule;
//或
import myModule from './myModule';

2…命名導出導入

// 導出單個變量、函數(shù)或類
export const var1 = "Value 1";
export function func() { /* 函數(shù)體 */ }
export class MyClass { /* 類定義 */ }
//或
import { var1, func, MyClass } from './myModule';

3.命名導出（Named Export）與默認導出（Default Export）結合使用

/ 導出默認值及其他變量、函數(shù)或類
export default myModule;
export const var1 = "Value 1";
export function func() { /* 函數(shù)體 */ }
export class MyClass { /* 類定義 */ }
//或
import myModule, { var1, func, MyClass } from './myModule';
//請注意，導入和導出的模塊路徑應該根據(jù)實際情況指定正確的文件路徑。此外，你可以在 import 語句中使用相對路徑或絕對路徑。

三、總結

總結起來，require 是 CommonJS 模塊系統(tǒng)中用于導入模塊的關鍵字，采用同步加載方式；而 import 和 export 是 ES6 模塊系統(tǒng)中用于導入和導出模塊的關鍵字，采用靜態(tài)加載方式，并且支持異步加載。要根據(jù)你所使用的環(huán)境和模塊規(guī)范選擇合適的關鍵字和模塊系統(tǒng)。

ES6模塊化（默認導入導出、按需導入導出、直接導入）

一、介紹ES6模塊化

    ES6 模塊化規(guī)范是瀏覽器端與服務器端通用的模塊化規(guī)范，ES6模塊化的出現(xiàn)前端開發(fā)者不再需要額外的學習其他的模塊化規(guī)范。

 二、ES6 模塊化規(guī)范中定義：

1.每個 js 文件都是一個獨立的模塊
2.導入其它模塊成員使用 import 關鍵字
3.向外共享模塊成員使用 export 關鍵字

三、默認導入導出

默認導出語法：export   default  默認導出的成員

默認導入語法：import 接收名  from  ‘模塊的路徑’

注意：

每個模塊中，只能有一次的 export default，不然就會報錯。

導入的語法的接收名自己取合法合理就行。

四、按需導入導出 

按需導出語法：  export   需要按需導出的成員 

按需導入語法：

基礎語法：import   {按需導入的名稱}  from ‘模塊的路徑’

導入多個：import   {按需導入的名稱1,按需導入的名稱2.....}  from  '模塊路徑'

起別名：import {按需導入的名稱  as  自己起個別名}  from  ‘模塊路徑’

批量導入：import * as  起的別名  from ‘模塊路徑'

 注意： 

1.每個模塊可以多次按需導出

2.按需導出沒有default

3.按需導入的成員名必須與按需導出的名稱保持一致

4.當不同的組件導出的模塊名相同，我們想在同一個文件中導入可以給其中一個起別名來進行區(qū)分和避免沖突   使用 as 關鍵字進行起別名（import   導出的名  from  起的別名  ”路徑“）

5.使用批量導出 一定要as起別名 否則沒法用

 總結：

1.按需導入導出可以一起使用

2.當文件中只導出一個成員的時候 通常使用默認導出（不強迫）

3.當文件中只導出多個成員的時候 通常使用按需導出（不強迫）

五、直接導入

不需要誰去用，直接就像執(zhí)行某模塊中的代碼可以直接導入

import ”路徑“

注意：沒有名字，沒有form 導入直接調(diào)用了

到此這篇關于es6中的import導入模塊 和 export導出模塊的文章就介紹到這了,更多相關es6 導入導出模塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論