如何检查是否已包含 JS 文件？

Question

我已将我的 javascript 拆分为不同的文件。 我想防止 javascript 文件被加载两次。 我怎样才能做到这一点？

Answer 1

下面是一个测试，根据js文件的路径查看是否包含了脚本：

function isScriptAlreadyIncluded(src){
    var scripts = document.getElementsByTagName("script");
    for(var i = 0; i < scripts.length; i++) 
       if(scripts[i].getAttribute('src') == src) return true;
    return false;
}

它适用于所有未通过 AJAX 加载的脚本，但如果您有 jsonp 代码运行，您可能需要修改它。

Answer 2

不要包括它们两次。 毕竟，是你在做包含。

但是，如果您正在动态地执行这些包含，则可以检查脚本是否已设置某些全局函数或对象。 例如，如果我在文件中有以下脚本：

Foo = function () {};

然后我像这样包含它：

<script src="../foo.js"></script>

在浏览器解析该脚本标记之前， Foo是undefined 。 处理完标签后， Foo是一个Function 。 您可以使用一些基于此的逻辑来确定是否应该包含某个文件。

Answer 3

我已经使用在每个动态加载的脚本底部添加的通用自调用函数解决了这个问题。

首先 - 通过在我的基本文件或将始终加载的脚本中声明一个新的空数组，即我案例中的主页 index.php

var scriptsLoaded = new Array();

然后在加载的脚本末尾添加一个自执行函数：

(function () { scriptsLoaded.push( 'this_script_name.js' ) })();

使用这种方法，scriptsLoaded 数组中的任何文件名都应该只引用已经完全加载的脚本。 简单地检查此数组将指示是否已加载脚本，这也可以用作检查是否为需要的任何脚本执行加载样式函数

Answer 4

不使用任何框架（我知道），您只能通过检查是否已经声明了全局范围中的某个变量来做到这一点。

你可以声明一个变量var include1 = true; 在include1.js ，并执行类似的操作

if (window.include1 !== true) {
    // load file dynamically
}

Answer 5

有时 js 文件是通过其他方式加载的（例如通过 js）。

这就是window.performance可以派上用场的时候。 我们可以检查加载的资源，而不是像其他答案中建议的那样检查script标签：

let resources = performance.getEntries()
    .filter(e => e.entryType === 'resource')
    .map(e => e.name);
if (resources.indexOf("//domain.com/path/to/script.js") === -1) {
    // Script was not yet loaded.
}

现在window.performance浏览器兼容性还不错： https : //caniuse.com/mdn-api_performance_getentries

如果我们想同时检查script标签和window.resources ，我们可以将它们放在一个函数中：

function is_script_already_included(src){
  const found_in_resources = performance.getEntries()
      .filter(e => e.entryType === 'resource')
      .map(e => e.name)
      .indexOf(src) !== -1;
  const found_in_script_tags = document.querySelectorAll(`script[src="${src}"]`).length > 0;
  return found_in_resources || found_in_script_tags;
}

Answer 6

您需要手动跟踪并确保。 UweB 的建议也适用。

您还可以查看 Require.js，它可以帮助您组织文件。