如何用js代码加载js文件

在JavaScript开发过程中，动态加载js文件是一项常见且实用的技能。它可以让我们根据具体的业务需求，在合适的时机加载所需的脚本，优化页面性能。以下将详细介绍几种使用js代码加载js文件的方法。

创建script标签

这是最常用的方法之一。通过JavaScript创建一个script元素，设置其src属性为要加载的js文件路径，然后将该元素添加到文档的head或body中。示例代码如下：

function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    script.type = 'text/javascript';
    document.head.appendChild(script);
}
// 使用示例
loadScript('yourScript.js');

在这段代码中，loadScript函数接受一个参数url，即要加载的js文件路径。通过document.createElement('script')创建script元素，设置src和type属性后，将其添加到document.head中。这种方式会异步加载脚本，不会阻塞文档的解析。

XMLHttpRequest对象

另一种方法是使用XMLHttpRequest对象。虽然它主要用于在浏览器和服务器之间进行异步数据传输，但也可以用来加载js文件。示例代码如下：

function loadScriptWithXHR(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var script = document.createElement('script');
            script.textContent = xhr.responseText;
            document.head.appendChild(script);
        }
    };
    xhr.send();
}
// 使用示例
loadScriptWithXHR('yourScript.js');

这里通过XMLHttpRequest获取js文件内容，然后创建一个script元素，将获取到的内容设置为其textContent，最后添加到文档中。不过这种方法加载的脚本会阻塞文档解析，需谨慎使用。

使用ES6的动态导入

ES6引入了动态导入语法，为加载模块提供了更简洁的方式。示例代码如下：

async function loadScriptES6() {
    await import('./yourScript.js');
}
// 使用示例
loadScriptES6();

动态导入返回一个Promise对象，使用await可以等待模块加载完成。这种方式适用于现代JavaScript项目，能更好地处理模块依赖关系。

掌握这些用js代码加载js文件的方法，能让开发者在项目中更加灵活地控制脚本加载，提升应用性能与用户体验。