这是一个完整的noob问题,但我无论如何都要问它
几天前我开始用backbone.js打球,我真的很着迷。当我完成了"待办事项"后,我开始着手做一个自己的项目。来自Java世界,我更喜欢将所有内容都保存在尽可能多的单独文件中。因此,我将我的模型视图和路由器拆分为单独的文件和文件夹。
当我试图将这些领域合并为一个单独的appliantion.js文件时,问题就出现了。同样,来自Java世界的我喜欢我可以自动化东西,更喜欢我可以使用熟悉的工具(如ant)为我的javascript项目设置构建过程。
我得到了一个示例ant构建模板,它以任意顺序连接和缩小所有文件。当它完成时,我试图运行我的JS应用程序,但不出所料,它失败了,出现了一堆错误。我的许多模型和视图试图相互扩展,其他模型和视图则依赖于它们作为组件。如果它们没有按正确的顺序定义,则应用程序只会达到尝试执行undefined
的extend
的程度
我以前就知道,对于JavaScript来说,顺序非常重要,但不知何故,我留下的印象是,如果所有脚本都在一个文件中,JS解析器将首先加载所有内容,然后尝试执行要执行的内容。嗯,我的假设是错误的。
可以按照我想要的特定顺序列出所有文件,但我真的需要这样一个原始步骤吗?不幸的是,在花了几个小时研究之后,我找不到更好的了。
是否真的可以以任意顺序连接相互依赖的JS文件,而不会发生冲突?我想,最大的问题是实际上调用了extend
函数,而不是每个脚本都简单地定义和对象文字
那么,解决方案是什么呢?
更新:我刚刚看到Sproutcore有自己的构建器。如果SC在创建和扩展实体的方式上与BB大致相似,那么SC生成器如何在不冲突的情况下工作?
有很多方法可以做到这一点,但下面是我的食谱。我在我的开发文件前面加了一个数字,从没有依赖关系的文件开始(基本"类",将依赖于其他模型的模型,然后是使用这些模型的视图,然后是调用这些视图的路由器,等等)
然后,我使用uglify-js(作为node.js库提供,您可以使用npm install uglify-js
安装)在一个文件中缩小我的所有js(不过,从您的问题中不知道您是否在服务器端使用node.js)。然后我cat *.js | uglifyjs -o min/myfile.min.js
。这将把我所有.js文件的内容(由于我的前缀,遵循依赖关系的顺序)发送到uglify,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所提到的。
您的"假设"仅适用于var
语句和形式为function name(a,b) {}
的函数。这两个被提升到脚本的顶部(或它们所在的功能块),并首先进行评估。
如果您的文件依赖于首先加载的其他文件,那么当您连接它们时,它们在最终文件中必须按顺序排列。
查看requirejs。设置需要一些时间,但它应该可以帮助您解决问题
这篇文章应该有助于实现。