在内存中加载javascript对象的正确方法？

Question

我的webapp我使用了大约30个js文件，每个文件包含1个函数。所有这些功能现在都是自我调用的，并且相互引用。

这个问题是index.jsp中脚本的顺序很重要。如果在尚未调用的函数上调用方法，则会得到未定义的错误。

有一段时间我们可以通过控制<script>标签的顺序来解决这个问题，但我想通过使用加载器脚本来做到这一点。

我设置了一个小fiddle来展示我的概念。我最关心的是我必须全局声明我的对象，以便在jquery(document).ready()函数中访问它们。

这是一个好的模式吗？任何提示高度赞赏！

Answer 1

您可以使用RequireJS或类似的加载程序，它将为您处理脚本依赖项。

您需要修改每个JS文件，使其成为与此示例类似的模块：

// File: module3.js
define(["module1", "module2"], function(m1, m2) {
    // Here, module1 and module2 are guaranteed to be loaded.
});

然后，您将创建一个“主”脚本（我通常称之为main.js）并需要几个模块：

require(["module3"], function (m3) {
  // Here module3 is loaded, as well as module1 and module2 
  // - because module3 depends on them.
});

并将其放入HTML：

<script data-main="scripts/main" src="scripts/require.js"></script>

Answer 2

尝试构建服务器端体系结构，以便为每页提供正确的js文件（和其他静态文件）。为页面创建1个缩小的js文件，并在html文件中初始化对象范围。