JavaScript 怎样动态加载 JavaScript

在 JavaScript 开发中，动态加载 JavaScript 文件是一项实用的技能，它可以在需要的时候灵活引入脚本，提升页面性能和代码的可维护性。

动态加载 JavaScript 最常用的方法之一是使用 document.createElement('script')。创建一个 script 元素对象，然后通过设置该对象的 src 属性来指定要加载的 JavaScript 文件路径。例如：

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

在这段代码里，我们创建了一个 script 元素，将其 src 属性设置为目标脚本文件路径，最后把它添加到 document.head 中。这样浏览器就会异步加载指定的 JavaScript 文件。

这种方式的优点在于，它允许我们在运行时根据不同的条件决定是否加载某个脚本。比如在用户执行特定操作后，才加载相关的功能脚本，从而减少页面初始加载的负担。

除了添加到 head 标签，我们也可以将动态创建的 script 元素添加到 document.body 中。不过这两者在加载顺序上略有不同。添加到 head 中的脚本会在页面的 DOM 结构解析之前加载，而添加到 body 中的脚本会在 DOM 解析完成之后加载。如果脚本依赖于页面的 DOM 结构，那么将其添加到 body 中是更好的选择。

const script = document.createElement('script');
script.src = 'yourScript.js';
document.body.appendChild(script);

另外，为了确保脚本加载完成后再执行相关操作，我们可以监听 script 元素的 load 事件。例如：

const script = document.createElement('script');
script.src = 'yourScript.js';
script.onload = function() {
    // 脚本加载完成后执行的代码
    console.log('脚本已加载完成');
};
document.body.appendChild(script);

通过动态加载 JavaScript，我们能够更高效地管理脚本资源，优化页面加载速度，为用户提供更好的体验。无论是构建复杂的单页面应用，还是对现有项目进行性能优化，掌握这一技术都十分关键。