在 js 文件中加载 js 文件的方法

在 JavaScript 开发中，有时我们需要在一个 js 文件里加载另一个 js 文件，这在模块化开发、代码组织优化等场景下非常实用。下面就来介绍几种常见的方法。

1. 使用 script 标签动态创建

这是一种较为灵活且广泛应用的方式。通过在 JavaScript 代码中动态创建 script 元素，然后设置其 src 属性为要加载的 js 文件路径，最后将该元素添加到文档中。示例代码如下：

function loadScript(url) {
    const script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
}
// 使用
loadScript('yourScript.js');

这种方法的优点是简单直观，兼容性好，几乎能在所有主流浏览器中运行。而且可以根据实际需求在代码运行过程中动态加载脚本，实现按需加载功能。

2. XMLHttpRequest 方式

利用 XMLHttpRequest 对象可以获取另一个 js 文件的内容，然后通过 eval() 函数来执行获取到的代码。示例代码如下：

function loadScriptWithXHR(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            eval(xhr.responseText);
        }
    };
    xhr.send();
}
// 使用
loadScriptWithXHR('yourScript.js');

不过，使用 eval() 函数存在一定安全风险，因为它会直接执行传入的代码，如果代码来源不可信，可能导致恶意代码注入。所以这种方法在使用时要格外谨慎。

3. ES6 模块导入

在 ES6 环境下，我们可以使用模块导入语法来加载另一个 js 文件。例如，在 main.js 中：

import { someFunction } from './anotherScript.js';
// 使用 someFunction
someFunction();

在 anotherScript.js 中：

export function someFunction() {
    console.log('This is from another script');
}

这种方式使代码结构更加清晰，便于管理和维护。但它需要运行环境支持 ES6 模块规范，在一些旧版本浏览器中可能无法使用。

以上这些方法各有优缺点，开发者可以根据项目的实际需求、运行环境以及安全性要求等来选择合适的在 js 文件中加载 js 文件的方式。