如何檢查是否已包含 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，它可以幫助您組織文件。