js模塊導(dǎo)入和導(dǎo)出方式

在現(xiàn)代JavaScript開(kāi)發(fā)中，模塊化編程已成為組織和管理代碼的核心方法。模塊化允許開(kāi)發(fā)者將大型程序拆分為獨(dú)立的、可復(fù)用的文件，從而提高代碼的可維護(hù)性和可讀性。以下是我總結(jié)的JavaScript中的模塊導(dǎo)入和導(dǎo)出方式。

在ES6中，引入了JavaScript的模塊系統(tǒng)，目前最推薦的模塊化方法，是使用import和export關(guān)鍵字來(lái)實(shí)現(xiàn)模塊的導(dǎo)入和導(dǎo)出。

ES6模塊提供了兩種主要的導(dǎo)出方式：命名導(dǎo)出(Named Exports)和默認(rèn)導(dǎo)出(Default Export)。

命名導(dǎo)出和導(dǎo)入

(1) 命名導(dǎo)出

命名導(dǎo)出可以在聲明時(shí)直接導(dǎo)出，也可以聲明后再導(dǎo)出，下面是示例代碼：

• 聲明時(shí)直接導(dǎo)出

//main.js
export const PI = 3.1415;
export function add(x, y) { 
	return x + y;
}

• 聲明后再導(dǎo)出

const PI = 3.1415;
function add(x, y) { 
	return x + y;
}
export { PI,add }

(2) 導(dǎo)入命名導(dǎo)出模塊：

import { PI, add } from './math.js';

(3) 命名導(dǎo)出特點(diǎn)：

• 允許一個(gè)模塊導(dǎo)出多個(gè)值，并且可以選擇性導(dǎo)入，靈活性好
• 導(dǎo)出時(shí)需指定名稱(chēng)，導(dǎo)入時(shí)需使用相同名稱(chēng)
• 指定了確切的名字，便于代碼追蹤和維護(hù)

(4) 適用場(chǎng)景

• 適合有多個(gè)功能的模塊

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

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

每個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出，默認(rèn)導(dǎo)出可以在聲明時(shí)直接導(dǎo)出，也可以聲明后再導(dǎo)出，下面是示例代碼：

• 聲明時(shí)直接導(dǎo)出

// add.js
export default function add(x,y){
    return x + y;
}
//默認(rèn)導(dǎo)出可以省略函數(shù)名，如下：
export default function (x,y){
    return x + y;
}

• 聲明后再導(dǎo)出

function add(x,y){
    return x + y;
}
export default add

(2) 導(dǎo)入默認(rèn)導(dǎo)出模塊：

import add from './add.js';

導(dǎo)入默認(rèn)導(dǎo)出時(shí)，不需要和導(dǎo)出時(shí)的名稱(chēng)保持一致，可以自定義命名，但是推薦的命名方式是和模塊名稱(chēng)保持一致。比如上示代碼，導(dǎo)入的模塊是add.js，所以我們導(dǎo)入的名稱(chēng)和他保持一致。

(3) 默認(rèn)導(dǎo)出特點(diǎn)：

• 簡(jiǎn)化了單個(gè)值的導(dǎo)入和導(dǎo)出，可以讓代碼更加簡(jiǎn)潔

(4) 適用場(chǎng)景

• 每個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出
• 適合單一功能的模塊

也可以同時(shí)在一個(gè)模塊中同時(shí)使用命名導(dǎo)出和默認(rèn)導(dǎo)出，但是要記住默認(rèn)導(dǎo)出只能有一個(gè)，

導(dǎo)入時(shí)，分別指定命名導(dǎo)出和默認(rèn)導(dǎo)出即可。

動(dòng)態(tài)導(dǎo)入

ES6還支持動(dòng)態(tài)導(dǎo)入，返回一個(gè)Promise，適用于按需加載和代碼分割的場(chǎng)景：

import('./math.js')
  .then(module => {
    console.log(module.add(2, 3));
  })
  .catch(err => {
    console.error('模塊加載失敗', err);
  });

或者使用async/await：

async function loadModule() {
  const module = await import('./math.js');
  module.add(2, 3);
}

as關(guān)鍵字

（1）功能：

as關(guān)鍵字，用于重命名導(dǎo)入或?qū)С龅闹怠?/p>

（2）使用場(chǎng)景：

解決名稱(chēng)沖突，使用當(dāng)前上下文，提高可讀性。

（3）用法：

在import導(dǎo)入語(yǔ)句中使用as關(guān)鍵字，修改導(dǎo)入后的名稱(chēng)，后續(xù)調(diào)用都使用修改后的名 稱(chēng)。

//1.假設(shè)add.js中add函數(shù)是命名導(dǎo)出
import {add as count} from './add.js'
//2.假設(shè)add.js中add函數(shù)是默認(rèn)導(dǎo)出
//默認(rèn)導(dǎo)出在導(dǎo)入時(shí)本身就可以自定義名稱(chēng)，所以不能直接使用as關(guān)鍵字重命名
//但還有一種寫(xiě)法，和命名導(dǎo)出寫(xiě)法一樣
import {default as count} from './add.js'
//3.將moduel.js模塊中的所有導(dǎo)出內(nèi)容導(dǎo)入，并聚合到一個(gè)moudle對(duì)象中
import *as moudle from './moudle.js'
console.log(moudle.add(1,2))

在export導(dǎo)入語(yǔ)句中使用as關(guān)鍵字，導(dǎo)出時(shí)使用as關(guān)鍵字修改了名稱(chēng)，外部導(dǎo)入時(shí)要使用修改后的名稱(chēng)，也可以通過(guò)as關(guān)鍵字直接指定默認(rèn)導(dǎo)出。

function add(x,y){
    return x+y;
}
export {add as count}
//將add函數(shù)作為默認(rèn)導(dǎo)出
//和'export default add' 效果一樣
export { add as count }

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

最新評(píng)論