避免多次加载 javascript 文件答案

【问题标题】：Avoiding multiple load of javascript file避免多次加载 javascript 文件
【发布时间】：2016-05-15 02:47:46
【问题描述】：

我将此 sn-p 添加到我的 asp.net web 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;
    }
});

有时我会遇到一个奇怪的异常

未捕获的类型错误：无法读取未定义的属性“firstLoad”

我需要知道：

为什么会这样？
我该如何解决？

【问题讨论】：

标签： javascript jquery html web namespaces

【解决方案1】：

有几个问题。

首先，您一开始不应该多次加载文件，因此没有必要去尝试确定您是否已加载文件。

但如果你想这样做：

第一个实际问题是你总是这样做：

blog = {};

...这意味着如果已经有一个 blog 全局变量，那么您将清除它的值并用一个空对象替换它。如果您想使用现有全局值或创建一个新值，请执行以下操作：

var blog = blog || {};

这看起来很奇怪，但是由于重复的 var 声明很好（并且不要更改变量），这将使用现有的值，或者如果没有（或它的值是假的）它会创建一个新的并用{}初始化它。

然后，一行

namesp.jsFile.firstLoad = false;

...在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...
}

【讨论】：

【解决方案2】：

这很简单：

在您的初始运行中，您定义

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

理论上，这意味着在某些负载上，blog 是：

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

然后您将blog.comments 作为namesp 参数传递给您的函数isFirstLoad。在该函数中，您进行评估：

namesp.jsFile.firstLoad === undefined;

好吧，您从未定义过blog.comments 的jsFile 属性。这意味着它是未定义的。尝试访问未定义变量的属性firstLoad 会报错

未捕获的类型错误：无法读取未定义的属性“firstLoad”

【讨论】：