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

不使用任何框架（我所知道），您只能通过检查全局范围内的某个变量是否已被声明来实现。

您可以在var include1 = true;内声明变量include1.js，并执行类似

的操作

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

Answer 4

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

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

var scriptsLoaded = new Array();

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

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

使用这种方法，scriptsLoaded数组中的任何文件名都应该只引用已经完全加载的脚本。只需检查此数组即可指示是否已加载脚本，该脚本还可用于检查是否为所需的脚本执行加载样式函数

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。

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

6 个答案: