js动态加载js的方法

在Web开发中，动态加载JavaScript文件是一项非常实用的技术。它允许我们根据用户的操作或特定的条件来加载所需的脚本，从而提高页面的性能和用户体验。下面将介绍几种常见的js动态加载js的方法。

方法一：使用document.createElement创建script标签

这是最常用的方法之一。我们可以通过JavaScript创建一个新的script标签，然后设置其src属性为要加载的js文件路径，最后将其添加到文档中。示例代码如下：

function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}
loadScript('example.js');

这种方法简单直接，但存在一个问题，即无法知道脚本是否加载完成。

方法二：使用onload事件监听脚本加载完成

为了解决上述问题，我们可以利用script标签的onload事件来监听脚本是否加载完成。示例代码如下：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.body.appendChild(script);
}
loadScript('example.js', function() {
    console.log('脚本加载完成');
});

这样，当脚本加载完成后，就会执行回调函数。

方法三：使用Promise实现异步加载

我们还可以使用Promise来实现更优雅的异步加载。示例代码如下：

function loadScript(url) {
    return new Promise((resolve, reject) => {
        var script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
    });
}
loadScript('example.js')
.then(() => console.log('脚本加载完成'))
.catch(() => console.log('脚本加载失败'));

通过Promise，我们可以更方便地处理加载成功和失败的情况。

js动态加载js的方法有多种，开发者可以根据具体的需求和场景选择合适的方法。在实际应用中，合理使用动态加载技术可以有效地优化Web页面的性能，提升用户体验。