避免JavaScript文件的多次加載

Question

我將此代碼段添加到我的asp.net網絡api應用程序中使用的每個javascript文件中，以避免多重負載：

Fullcalendar.js

blog = {};
blog.comments = blog.comments || {};
blog.comments.debugMode = false;

blog.isFirstLoad = function (namesp, jsFile) {
    var isFirst = namesp.jsFile.firstLoad === undefined;
    namesp.jsFile.firstLoad = false;
    return isFirst;
};

$(document).ready(function () {
    if (!blog.isFirstLoad(blog.comments, "fullcalendar.js")) {
        return;
    }
});

有時候我會得到一個奇怪的例外

未捕獲的TypeError：無法讀取未定義的屬性“ firstLoad”

我需要知道 ：

1. 為什么會這樣？
2. 我該如何解決？

Answer 1

那里有幾個問題。

首先，一開始您不應該多次加載文件，因此不必進行試圖弄清楚是否已加載文件的工作。

但是，如果要這樣做：

第一個實際問題是，您始終會這樣做：

blog = {};

...這意味着，如果已經有一個全球性的blog ，則您要清除它的值，並用一個空的對象替換它。 如果要使用現有的全局值或創建新的全局值，請執行以下操作：

var blog = blog || {};

這似乎很奇怪，但是由於重復的var聲明很好（並且不要更改變量），所以將使用現有的值，或者如果沒有值（或它的值是false），它將創建一個新的值並用{}初始化它。

然后，線

namesp.jsFile.firstLoad = false;

...在jsFile上namesp名為jsFile的屬性，並假定它不是null或undefined 。 它不會使用jsFile參數的值來查找屬性。

為此，請使用方括號表示法：

namesp[jsFile].firstLoad = false;

即使這樣，您仍假定它不是null或undefined ，但可能是。 您可能只是想要：

namesp[jsFile] = false;

或可能：

namesp[jsFile] = namesp[jsFile] ||{};
namesp[jsFile].firstLoad = false;

---

也就是說，使用blog.comments跟蹤是否已加載JavaScript文件似乎很奇怪。 如果文件可能已經被加載，只需執行以下操作：

var fullCalendarLoaded;
if (fullCalendarLoaded) {
    // It's already loaded
} else {
    // It isn't, but it is now
    fullCalendarLoaded = true;
    // ...do your init...
}

或者，如果您有多個，並想使用一個全局變量：

var loadedScripts = loadedScripts || {};
if (loadedScripts.fullCalendar) {
    // Already loaded
} else {
    // Not loaded yet
    loadedScripts.fullCalendar = true;
    // ...do init...
}

或者，如果使用文件名很重要：

var loadedScripts = loadedScripts || {};
function firstLoad(filename) {
    if (loadedScripts[filename[) {
        return false;
    }
    // Not loaded yet, remember we've loaded it now
    loadedScripts[filename] = true;
    return true;
}

然后：

if (firstLoad("fullcalendar.js")) {
    // First load, do init...
}

Answer 2

這很簡單：

在初始運行時，您定義

blog = {};
blog.comments = blog.comments || {};
blog.comments.debugMode = false;

從理論上講，這意味着在某些負載下， blog是：

var blog = {
  comments: {
    debugMode: false
  }
}

然后，通過blog.comments到您的功能isFirstLoad作為namesp參數。 在該函數中，您可以進行評估：

namesp.jsFile.firstLoad === undefined;

好吧，你從來沒有定義jsFile財產blog.comments 。 這意味着它是未定義的。 嘗試訪問未定義變量的firstLoad屬性會給您帶來錯誤

未捕獲的TypeError：無法讀取未定義的屬性“ firstLoad”