es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊

一、定義

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

二、使用

1.默認(rèn)導(dǎo)出導(dǎo)入

// 導(dǎo)出一個(gè)默認(rèn)的值或?qū)ο?
export default myModule;
//或
import myModule from './myModule';

2…命名導(dǎo)出導(dǎo)入

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

3.命名導(dǎo)出（Named Export）與默認(rèn)導(dǎo)出（Default Export）結(jié)合使用

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

三、總結(jié)

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

ES6模塊化（默認(rèn)導(dǎo)入導(dǎo)出、按需導(dǎo)入導(dǎo)出、直接導(dǎo)入）

一、介紹ES6模塊化

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

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

1.每個(gè) js 文件都是一個(gè)獨(dú)立的模塊
2.導(dǎo)入其它模塊成員使用 import 關(guān)鍵字
3.向外共享模塊成員使用 export 關(guān)鍵字

三、默認(rèn)導(dǎo)入導(dǎo)出

默認(rèn)導(dǎo)出語法：export   default  默認(rèn)導(dǎo)出的成員

默認(rèn)導(dǎo)入語法：import 接收名  from  ‘模塊的路徑’

注意：

每個(gè)模塊中，只能有一次的 export default，不然就會(huì)報(bào)錯(cuò)。

導(dǎo)入的語法的接收名自己取合法合理就行。

四、按需導(dǎo)入導(dǎo)出 

按需導(dǎo)出語法：  export   需要按需導(dǎo)出的成員 

按需導(dǎo)入語法：

基礎(chǔ)語法：import   {按需導(dǎo)入的名稱}  from ‘模塊的路徑’

導(dǎo)入多個(gè)：import   {按需導(dǎo)入的名稱1,按需導(dǎo)入的名稱2.....}  from  '模塊路徑'

起別名：import {按需導(dǎo)入的名稱  as  自己起個(gè)別名}  from  ‘模塊路徑’

批量導(dǎo)入：import * as  起的別名  from ‘模塊路徑'

 注意： 

1.每個(gè)模塊可以多次按需導(dǎo)出

2.按需導(dǎo)出沒有default

3.按需導(dǎo)入的成員名必須與按需導(dǎo)出的名稱保持一致

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

5.使用批量導(dǎo)出 一定要as起別名 否則沒法用

 總結(jié)：

1.按需導(dǎo)入導(dǎo)出可以一起使用

2.當(dāng)文件中只導(dǎo)出一個(gè)成員的時(shí)候 通常使用默認(rèn)導(dǎo)出（不強(qiáng)迫）

3.當(dāng)文件中只導(dǎo)出多個(gè)成員的時(shí)候 通常使用按需導(dǎo)出（不強(qiáng)迫）

五、直接導(dǎo)入

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

import ”路徑“

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

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

最新評論