專注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2022-12-07 10:29:07 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽2931次
在本節(jié)中，我們將了解兩種流行的將 JS 文件包含在另一個(gè) JS 文件中的方法：
使用ES6模塊。
使用Node JS 需要函數(shù)。
讓我們從使用 ES6 導(dǎo)入和導(dǎo)出的方式開(kāi)始。創(chuàng)建一個(gè)名為utils.js的文件并在其中定義以下函數(shù)和常量：
export function greet(name) {
return `Hello, ${name}`;
}
export const message = "How you doing?";
請(qǐng)注意，我們?cè)诤瘮?shù)和變量之前使用了export關(guān)鍵字來(lái)指定這些對(duì)象可以被其他文件使用。
Hello, ${name}是 JavaScript 中的模板文字。它允許我們使用$和{}語(yǔ)法將變量嵌入到字符串中。
現(xiàn)在，創(chuàng)建另一個(gè)名為main.js的文件并在其中寫入以下代碼：
import { greet, message } from "./utils.js";
const greet_scaler = greet("Scaler");
console.log(greet_scaler); // Hello, Scaler
console.log(message); // How you doing?
在第一行中，我們通過(guò)在大括號(hào){}內(nèi)指定它們來(lái)從utils.js導(dǎo)入greet和message。 在這一行之后，我們可以使用在同一個(gè)文件中定義的導(dǎo)入對(duì)象。然后，我們控制臺(tái)記錄了這兩個(gè)對(duì)象的輸出。
用于導(dǎo)入的 ES6 語(yǔ)法：import {object1, object2, ...} from 'filename.js'
如果你打算在 node js 環(huán)境中使用 ES6 模塊，請(qǐng)記住以 .mjs 擴(kuò)展名命名你的文件或在 package.json 文件中設(shè)置 "type": "module"。
我們可以使用default關(guān)鍵字來(lái)默認(rèn)從文件中導(dǎo)出一個(gè)對(duì)象。這是什么意思?讓我們看一個(gè)例子。通過(guò)在utils.js中添加default使greet函數(shù)成為默認(rèn)導(dǎo)出：
export default function greet(name) {
return `Hello, ${name}`;
}
現(xiàn)在，您可以像這樣在main.js中導(dǎo)入它：
import randomName from "./utils.js";
const greet_scaler = randomName("Scaler");
console.log(greet_scaler); // Hello, Scaler
它會(huì)像以前一樣工作!
在執(zhí)行默認(rèn)導(dǎo)出時(shí)，randomName是從 greet.js 導(dǎo)入的。由于randomName不在utils.js中，默認(rèn)導(dǎo)出(本例中為greet())導(dǎo)出為 random_name。
大多數(shù)現(xiàn)代瀏覽器，如 chrome、safari 和 firefox 都支持直接運(yùn)行 ES6 模塊。讓我們嘗試在瀏覽器中運(yùn)行之前創(chuàng)建的模塊。
我們使用以下代碼創(chuàng)建了兩個(gè) JS 文件：
工具.js
export function greet(name) {
return `Hello, ${name}`;
}
export const message = "How you doing?";
主程序
import { greet, message } from "./utils.js";
const greet_scaler = greet("Scaler");
console.log(greet_scaler);
console.log(message);
在main.js文件中，我們使用import關(guān)鍵字從utils.js導(dǎo)入并使用了一個(gè)函數(shù)。
現(xiàn)在，我們想通過(guò)將main.js模塊鏈接到 HTML 文件來(lái)使用瀏覽器運(yùn)行main.js。
因此，創(chuàng)建一個(gè)index.html文件并包含main.js腳本，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using ES6 modules</title>
</head>
<body>
<script src="main.js" type="module"></script>
</body>
</html>
我們需要<script>元素中的type="module"屬性來(lái)將此腳本聲明為模塊。type= " module"允許在JS 文件中使用導(dǎo)入和導(dǎo)出。
使用本地服務(wù)器在瀏覽器中打開(kāi) HTML 文件，然后打開(kāi)控制臺(tái)(按 F12)。您將看到以下輸出：
由于 JavaScript 模塊安全要求，您無(wú)法在瀏覽器中本地加載模塊(即使用file:// URL )。
以下部分需要對(duì) Node JS 框架有基本的了解。如果您是 JavaScript 新手，可以跳過(guò)本節(jié)。
另一種流行的導(dǎo)入和導(dǎo)出 JS 文件的方法是使用 Node JS 的 require 函數(shù)。
Node.js是一種開(kāi)源、跨平臺(tái)、后端 JavaScript 運(yùn)行時(shí)環(huán)境，用于在 Web 瀏覽器之外執(zhí)行 JavaScript 代碼。它用于創(chuàng)建 Web 服務(wù)器。
您需要安裝 Node JS才能運(yùn)行本節(jié)中給出的代碼。
Node JS 甚至在 JavaScript 中引入 ES6 模塊之前就已經(jīng)有了模塊系統(tǒng)。
讓我們?cè)?Node JS 中使用 require 重寫前面的問(wèn)候示例。使用以下代碼創(chuàng)建一個(gè)新文件utils.js ：
console.log("Executing utils.js")
function greet(name) {
return `Hello, ${name}`;
}
const message = "How you doing?";
module.exports = {
greet,
message,
};
modules.exports對(duì)象包含此文件的所有導(dǎo)出。現(xiàn)在，使用以下代碼創(chuàng)建main.js文件：
utils = require("./utils");
const greet_scaler = utils.greet("Scaler");
console.log(greet_scaler);
console.log(utils.message);
注意第一行，我們通過(guò)傳遞需要導(dǎo)入的文件的名稱來(lái)使用require函數(shù)。需求函數(shù)：
讀取文件
執(zhí)行文件
然后返回導(dǎo)出對(duì)象。
我們將返回的對(duì)象存儲(chǔ)到utils變量中，并使用它來(lái)訪問(wèn)greet函數(shù)和message。
嘗試使用節(jié)點(diǎn)運(yùn)行它，如下所示：
node main.js
您將看到以下輸出：
Executing utils.js
Hello, Scaler
How you doing?
注意，輸出中的Executing utils.js，這是因?yàn)閞equire函數(shù)在返回exports對(duì)象之前正在執(zhí)行文件。
要點(diǎn)：
ES6 模塊系統(tǒng)和 Node JS 要求是將一個(gè) JS 文件包含在另一個(gè) JS 文件中的最流行的方式。
現(xiàn)代瀏覽器也直接支持 ES6 模塊。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)