javascript - 连接几个 javascript 文件时出现问题

Question

这完全是菜鸟问题，但我还是要问

几天前我开始玩backbone.js，我真的很着迷。当我克服了“待办事项”后，我开始做自己的一个项目。来自 Java 世界，我更喜欢将所有内容保存在尽可能多的单独文件中。因此，我将模型 View 和路由器分成单独的文件和文件夹。

当我尝试将这些字段合并到一个 applciation.js 文件中时，问题就出现了。再说一遍，来自 Java 世界，我喜欢能够实现自动化，更喜欢能够使用熟悉的工具(如 ant)为我的 javascript 项目设置构建流程。

我得到了一个示例 ant 构建模板，它以任意顺序连接并缩小所有文件。当它完成后，我尝试运行我的 JS 应用程序，毫不奇怪，它失败并出现一堆错误。我的许多模型和 View 都试图相互扩展，其他模型和 View 则依赖它们作为组件。如果它们没有以正确的顺序定义，应用程序就会尝试执行未定义

的extend

我以前就知道，对于 JavaScript 来说，顺序非常重要，但不知何故，我留下了这样的印象:如果所有脚本都在一个文件中，JS 解析器将首先加载所有内容，然后尝试执行无论要执行什么。嗯，我的假设是错误的。

可以按照我想要的特定顺序列出所有文件，但我真的需要执行如此原始的步骤吗？不幸的是，经过几个小时的研究，我找不到更好的东西。

是否真的可以以任意顺序连接彼此依赖的 JS 文件而不发生冲突？我想，最大的问题是 extend 函数实际上被调用，而不是每个脚本简单地定义和对象文字

那么，解决方案是什么？

更新:我刚刚看到 Sproutcore 有自己的构建器。如果 SC 与 BB 在创建和扩展实体的方式上大致相似，那么 SC 构建器如何工作而不发生冲突？

Answer 1

有很多方法可以做到这一点，但这是我的食谱。我在我的开发文件前加上一个数字前缀，从没有依赖项的文件开始(基“类”、将依赖于其他模型的模型、使用这些模型的 View 、然后调用这些 View 的路由器等)。

然后我使用 uglify-js (作为一个 node.js 库提供，您使用 npm install uglify-js 安装)将我的所有 js 缩小到一个文件中(不知道您的不过，如果您使用 Node.js 服务器端，则有问题)。然后我cat *.js | uglifyjs -o min/myfile.min.js。这会将我所有 .js 文件的内容(由于我的前缀而尊重依赖关系的顺序)发送到 uglify，这将缩小它并将其保存到单个文件中。

因为我也喜欢自动化，所以我在 Makefile 中进行了设置，尽管我猜它可以使用 Ant 来完成(不太熟悉它)。 Makefile 的相关部分如下所示:

TARGET_MIN_FILE = public/js/min/myfile.min.js
JS = $(shell echo public/js/*.js)


public/js/min/myfile.min.js: $(JS)
    cat $(JS) | uglifyjs -o $(TARGET_MIN_FILE)


clean:
    rm -f $(TARGET_MIN_FILE)

.PHONY: clean

另一方面，如果您选择异步模块定义 (AMD) 格式，则可以 require() 您的模块，它会以正确的顺序为您管理依赖项加载(有关更多信息，请参阅 Require.js) ，正如 TheShelfishMeme 所提到的。