在js中引入另一个js文件
- 2022-12-07 10:29:07
- 1917次 星辉
在本节中，我们将了解两种流行的将 JS 文件包含在另一个 JS 文件中的方法：
使用ES6模块。
使用Node JS 需要函数。
使用导入/导出 | ES6模块
让我们从使用 ES6 导入和导出的方式开始。创建一个名为utils.js的文件并在其中定义以下函数和常量：
export function greet(name) {
return `Hello, ${name}`;
}
export const message = "How you doing?";
请注意，我们在函数和变量之前使用了export关键字来指定这些对象可以被其他文件使用。
Hello, ${name}是 JavaScript 中的模板文字。它允许我们使用$和{}语法将变量嵌入到字符串中。
现在，创建另一个名为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?
在第一行中，我们通过在大括号{}内指定它们来从utils.js导入greet和message。 在这一行之后，我们可以使用在同一个文件中定义的导入对象。然后，我们控制台记录了这两个对象的输出。
用于导入的 ES6 语法：import {object1, object2, ...} from 'filename.js'
如果你打算在 node js 环境中使用 ES6 模块，请记住以 .mjs 扩展名命名你的文件或在 package.json 文件中设置 "type": "module"。
使用默认导出
我们可以使用default关键字来默认从文件中导出一个对象。这是什么意思?让我们看一个例子。通过在utils.js中添加default使greet函数成为默认导出：
export default function greet(name) {
return `Hello, ${name}`;
}
现在，您可以像这样在main.js中导入它：
import randomName from "./utils.js";
const greet_scaler = randomName("Scaler");
console.log(greet_scaler); // Hello, Scaler
它会像以前一样工作!
在执行默认导出时，randomName是从 greet.js 导入的。由于randomName不在utils.js中，默认导出(本例中为greet())导出为 random_name。
在浏览器中使用 ECMAScript (ES6) 模块
大多数现代浏览器，如 chrome、safari 和 firefox 都支持直接运行 ES6 模块。让我们尝试在浏览器中运行之前创建的模块。
我们使用以下代码创建了两个 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关键字从utils.js导入并使用了一个函数。
现在，我们想通过将main.js模块链接到 HTML 文件来使用浏览器运行main.js。
因此，创建一个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"属性来将此脚本声明为模块。type= " module"允许在JS 文件中使用导入和导出。
使用本地服务器在浏览器中打开 HTML 文件，然后打开控制台(按 F12)。您将看到以下输出：
由于 JavaScript 模块安全要求，您无法在浏览器中本地加载模块(即使用file:// URL )。
使用 Node.js需要
以下部分需要对 Node JS 框架有基本的了解。如果您是 JavaScript 新手，可以跳过本节。
另一种流行的导入和导出 JS 文件的方法是使用 Node JS 的 require 函数。
Node.js是一种开源、跨平台、后端 JavaScript 运行时环境，用于在 Web 浏览器之外执行 JavaScript 代码。它用于创建 Web 服务器。
您需要安装 Node JS才能运行本节中给出的代码。
Node JS 甚至在 JavaScript 中引入 ES6 模块之前就已经有了模块系统。
让我们在 Node JS 中使用 require 重写前面的问候示例。使用以下代码创建一个新文件utils.js ：
console.log("Executing utils.js")
function greet(name) {
return `Hello, ${name}`;
}
const message = "How you doing?";
module.exports = {
greet,
message,
};
modules.exports对象包含此文件的所有导出。现在，使用以下代码创建main.js文件：
utils = require("./utils");
const greet_scaler = utils.greet("Scaler");
console.log(greet_scaler);
console.log(utils.message);
注意第一行，我们通过传递需要导入的文件的名称来使用require函数。需求函数：
读取文件
执行文件
然后返回导出对象。
我们将返回的对象存储到utils变量中，并使用它来访问greet函数和message。
尝试使用节点运行它，如下所示：
node main.js
您将看到以下输出：
Executing utils.js
Hello, Scaler
How you doing?
注意，输出中的Executing utils.js，这是因为require函数在返回exports对象之前正在执行文件。
要点：
ES6 模块系统和 Node JS 要求是将一个 JS 文件包含在另一个 JS 文件中的最流行的方式。
现代浏览器也直接支持 ES6 模块。
选你想看
你适合学Java吗？4大专业测评方法
代码逻辑 吸收能力 技术学习能力 综合素质
先测评确定适合在学习
价值1998元实验班免费学
在线咨询
免费试学