在前端开发中，动态加载 JavaScript 脚本是一种常见的技术。通过动态加载，可以使页面更具交互性和响应性，并且可以优化网站的性能。本文将介绍如何在 JavaScript 中实现动态加载 JS，并提供示例代码。
原生JavaScript实现动态加载JS
要在 JavaScript 中动态加载 JS，可以使用 document.createElement 方法创建一个新的 script 标签，然后设置其 src 属性为脚本的 URL。最后，将该标签添加到文档的 head 或 body 标签中即可。
以下是示例代码：
--- ------ - --------------------------------- ---------- - -------------------- ----------------------------------
此代码会向页面添加一个新的 script 标签，并下载并执行指定的 JavaScript 文件。
使用jQuery实现动态加载JS
使用 jQuery 可以更方便地实现动态加载 JS。jQuery 提供了 $.getScript 方法，它接受一个 URL 参数，并自动创建一个 script 标签来加载这个 URL 所指向的脚本文件。
以下是示例代码：
-------------------------------- ---------- - -- ---------- ---
此代码会向页面添加一个新的 script 标签，并下载并执行指定的 JavaScript 文件。一旦文件下载和执行成功，回调函数就会被调用。
加载多个JS文件
有时可能需要同时加载多个 JavaScript 文件。在这种情况下，可以使用 Promise 和 async/await 来确保所有文件都成功加载。
以下是示例代码：
----- -------- -------------------- -
----- -------- - --------------- -- -
------ --- ----------------- ------- -- -
----- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
---
----- ----------------------
-
---------------------------------- ----------------------
-------- -- -
-- ------------
--
--------- -- -
-- ----------
---此代码将创建一个包含所有 JavaScript 文件 URL 的数组，并为每个 URL 创建一个新的 Promise 对象。然后，使用 Promise.all 方法等待所有脚本都成功加载和执行。
总结
动态加载 JavaScript 脚本是一种常见的技术，它可以使页面更具交互性和响应性，并且可以优化网站的性能。本文介绍了如何在原生 JavaScript 和 jQuery 中实现动态加载 JS，并提供了示例代码。我们还介绍了如何加载多个 JavaScript 文件并使用 Promise 和 async/await 确保所有文件都成功加载。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9647