需要JavaScript头文件吗？

我在一个名称空间下有多个.js文件，假设我的名称空间是

foo

，在每个文件中我都有如下代码：

window.foo = windown.foo || {};
foo.bar = {};
foo.baz = {};
foo.utils = {};

在文件

utils.js

(function() {

    window.foo = window.foo || {};
    foo.utils = foo.utils || {};
    foo.bar = foo.bar || {};

    var utils = foo.utils;
    var bar = foo.bar;

    utils.helper1 = function(abc) {

        var xyz = bar(abc);
        ...
    }

})();

基本上，在每个js文件中，我希望有像

var utils=foo.utils

这样的代码，这样我就不必每次都编写

foo.utils

。但是我必须写

foo.utils=foo.utils | |{}位于顶部，因为可能尚未加载utils.js

我认为解决这个问题的一种方法是有一个头文件，并确保它总是先加载，它基本上声明了我的命名空间下的所有公共函数，如下所示：

window.foo = windown.foo || {};
foo.bar = {};
foo.baz = {};
foo.utils = {};

有更好的办法吗？我不想确保js文件的加载顺序。
听起来您已经知道了选择

脚本加载顺序不受控制。在使用名称空间中的每个对象之前，请确保每个文件都对其进行了初始化（如您的示例所示）

一个保证加载的文件首先初始化名称空间。将名称空间初始化代码放入一个文件中，并确保首先加载该文件。然后，其他文件知道名称空间已经初始化，因此它们不必这样做

有更好的办法吗

不，不是真的。除了这些选择，没有捷径可走。如果您不想强制执行任何特定的加载顺序，那么在分配名称空间之前，您需要样板文件来初始化名称空间

还有其他混合选择，比如定义一个函数，让您分配给一个名称空间，如果名称空间不存在，该函数将为您创建名称空间。但是，当然，您必须确保该函数也已首先加载，这样就不会比上述选项节省太多钱。
3。在JavaScript插入之前（可能在头文件中），在HTML中内联声明变量。但这不是一个理想的解决方案，因为每次加载页面时都会传输它（没有缓存），并且它将HTML与JavaScript混合使用。@ssc-hrep3-我想从技术上讲这是一个选项，但是您必须将该代码复制到每个HTML文件中，并且它仍然是顺序敏感的，因为您必须在加载相关脚本之前复制它。而且，如果必须进行更改，则必须修改每个HTML文件。我想我看不出这比我们已有的选项2有多好。有趣的是，我没有JavaScript的行业经验，所以我认为可能会有一些共识解决方案，或者一些我不知道的JavaScript魔术。谢谢@ARCH1ECT—在大多数情况下，让每个JS文件只负责初始化它将要分配给的任何名称空间是有意义的。这样，您就可以根据需要更自由地包含各个JS文件，并且每个文件都更加独立。@jfriend00我认为这不仅仅是一个理论上的解决方案。通常，您使用的是一种服务器端语言，在这种语言中，您可以轻松地解析文件（PHP、Java、Perl..）。然后，您有一个头文件，它包含在所有位置（doctype、元数据等也需要包含在每个文件中）。当然，之后需要包含JavaScript依赖项。在我看来，最好的解决方案是使用JavaScript构建过程（Grunt、Gulp等）以正确的顺序连接所有文件。