javascript - 确保不会多次下载相同的 javascript 文件

Question

我正在尝试开发一个可嵌入的小部件。此小部件将一些 UI 元素呈现到客户页面中。

此小部件将如下所示：

<script src="//example.com/widget.js?param1=a&param2=b" async></script>

允许用户在单个页面上嵌入多个小部件，每个小部件具有一组不同的参数。

在这个小部件脚本中，我试图加载渲染我的小部件所需的其他 javascript 和 css 文件。

这是我用来加载其他 javascript 文件的函数。

function loadScript(scriptUrl) {
    var s = document.createElement('script');
    s.async = true;
    s.src = scriptUrl;
    document.body.appendChild(s);
}

问题在于，当每页有多个嵌入时，以这种方式加载的每个脚本都会加载多次。

如何确保每个文件只加载一次？例如，我尝试在该加载器脚本中加载一个 jQuery 引用，我看到如果我将我的小部件嵌入 5 次，则会有 5 次调用 jquery 库。

Answer 1

3 extra lines of code

var scripts = {};  //record what is loaded
function loadScript(scriptUrl) {
    if (scripts[scriptUrl]) return;  //exit if loaded
    scripts[scriptUrl] = 1;  //mark that it is loaded
    var s = document.createElement('script');
    s.async = true;
    s.src = scriptUrl;
    document.body.appendChild(s);
}