js引用另一个js文件的方法|极客笔记

js引用另一个js文件的方法

在开发网页应用或者网站过程中，我们经常会将JavaScript代码分散到多个文件中来提高代码的可维护性和可读性。当需要在一个JS文件中引用另一个JS文件中的代码时，我们可以使用多种方法来实现。

方法一：使用`<script>`标签引入外部JS文件

最常见的方法是在HTML文档中使用<script>标签来引入外部的JavaScript文件。首先，在主文件中添加如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用外部JS文件示例</title>
</head>
<body>

<script src="external.js"></script>
</body>
</html>

在上述示例中，external.js是你想引入的外部JavaScript文件。当浏览器加载这个HTML文件时，就会自动加载外部文件中的JavaScript代码。

示例代码：external.js

// external.js
console.log("Hello from external.js!");

运行结果：

Hello from external.js!

方法二：使用ES6的`import`语法

如果你正在使用ES6的模块化语法，可以使用import关键字来引入外部的JavaScript文件。首先，确保外部文件使用export关键字导出需要暴露的内容。例如：

示例代码：external_module.js

// external_module.js
export function greet(name) {
    console.log(`Hello, ${name}!`);
}

然后，在主文件中使用import语法引入外部文件的内容：

// main.js
import { greet } from './external_module.js';

greet("Alice");

在上述示例中，main.js中通过import { greet } from './external_module.js';引入了external_module.js中导出的greet函数，并在主文件中调用了这个函数。

运行结果：

Hello, Alice!

需要注意的是，ES6模块化语法需要在支持ES6的浏览器或者使用构建工具（如Webpack、Rollup等）进行转译才能正常运行。

方法三：使用动态创建`<script>`标签

在某些特殊情况下，我们可能需要在代码运行时动态地引入外部的JavaScript文件。这时可以借助JavaScript动态创建<script>标签来实现。

示例代码：

// main.js
function loadExternalScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
    });
}

loadExternalScript('external.js')
    .then(() => {
        console.log('External script loaded!');
        // 在这里可以使用外部文件中的函数或者变量
    })
    .catch(() => {
        console.error('Failed to load external script.');
    });

在上述示例中，loadExternalScript函数可以动态地加载外部的JavaScript文件，并返回一个Promise对象。当外部文件加载完成时，通过Promise的then方法执行相关的操作。