JavaScript 怎样加载其他 JavaScript 文件

在 JavaScript 开发中，加载其他 JavaScript 文件是一项常见且重要的操作。合理地加载外部文件可以提高代码的模块化、可维护性与复用性。以下将介绍几种常见的加载方式。

首先是最传统的 script 标签方式。在 HTML 文件中，通过 。src 属性指定要加载的 JavaScript 文件的路径。这种方式简单直接，浏览器在解析 HTML 时会按照顺序加载 script 标签中的文件。如果有多个 script 标签，会依次加载，并且在加载过程中会阻塞页面的渲染。为了避免阻塞，可以将 script 标签放置在 HTML 页面的底部，即 标签之前。

其次是动态创建 script 元素。通过 JavaScript 代码动态创建 script 元素并设置其 src 属性来加载文件。示例代码如下：

const script = document.createElement('script');
script.src = 'newScript.js';
document.head.appendChild(script);

这种方式的优势在于可以根据条件动态加载 JavaScript 文件，比如在特定事件触发后加载特定的脚本。而且它不会阻塞页面的解析，提高了页面的加载速度。不过要注意，动态加载的脚本执行顺序是不确定的，可能在主脚本期望的时机之后才执行。

还有 XMLHttpRequest（XHR）方式。虽然它主要用于与服务器进行数据交互，但也可以用来加载 JavaScript 文件。先使用 XHR 获取文件内容，然后使用 eval() 函数执行获取到的代码。不过这种方式存在安全风险，因为 eval() 函数会执行任意代码，如果获取的文件内容被篡改，可能会导致安全问题，所以在实际应用中较少使用。

ES6 模块引入了 import 语法来加载其他 JavaScript 文件。在模块文件中，可以使用 export 关键字导出变量、函数等，然后在需要的地方使用 import 导入。例如：

// 在 utils.js 中
export function add(a, b) {
    return a + b;
}

// 在 main.js 中
import { add } from './utils.js';
console.log(add(1, 2));

这种方式使得模块之间的依赖关系更加清晰，也方便了代码的管理与维护。

在实际开发中，应根据项目需求选择合适的 JavaScript 文件加载方式，以提升开发效率和用户体验。