2012-03-15 64 views
2

我建立这个文件夹中组织一个相当大规模的JavaScript Backbone.js的应用:为JavaScript实验组织DRY模板?

app 
    index.html 

libs 
    underscore 
    jquery 
    [...] 

src 
    utils 
    modules 
    [...] 

index.html文件基本上加载了所有的Backbone.js的路由器等,以及实例AMD模块等。

然而,我经常需要创建基本上与Big应用程序分享依赖关系的小应用程序。

假设我需要创建3个小实验(单独的页面),所有这些实验都加载了相同的常见嫌疑犯(下划线,主干以及我编写的一些util库和模块)。

它们可能在以下方面有所不同:1)它们如何扩展这些JavaScript库,2)实例化的内容以及3)标记和交互。

我该如何保持这种实验干爽?
如何设置此“可扩展模板”?

回答

0

在我看来,这是拥有良好构建系统的地方。设置越复杂,设置配置文件就越有用,可以将依赖管理整合到一个地方。

  • 您需要加载同一组的多个静态页面相关性,但你的相关性列表开发过程中经常发生变化:当此就显得尤为重要。

  • 您需要能够轻松地为生产版本创建压缩版本的依赖项。我发现这对Backbone非常重要,因为未压缩的版本非常大,但在开发过程中非常有用。

我一般使用Apache Ant这个,但是有很多构建系统。我已经在过去做的是:

  1. 搭建index.tmpl.html文件与核心HTML标记和占位符JS脚本,CSS文件,并强调模板。

  2. 制作一个build.properties定义我的依赖项列表的文件。您可以用不同的属性名称以不同的方式将它们分组,例如lib.scripts.allutil.scripts.all

  3. 在我的构建过程中,基于index.tmpl.html,使用<script>和其他标记来加载我的依赖关系,创建一个新的index.html文件。我有不同的目标来加载原始文件或将所有内容压缩到生产就绪的单个脚本文件中。

您可以在this Github project中看到此设置的示例。

如果我了解您的要求,您可以设置一个类似的构建文件,并进行一些调整,以允许您设置a)要使用的HTML模板(您的默认索引或另一个具有特定于实验的标记),b)输出文件,c)要加载的特定的依赖关系集,d)加载的附加依赖关系,例如特定于实验的模块或初始化脚本。您可以将这些属性设置为特定目标(如果您认为可以重复使用它们几次),或者在通过-D标志调用ant时在命令行中指定它们。

这会让您有很大的灵活性来重新使用代码的不同部分,并且还有一个额外的好处,即将“实验”移动到核心生产代码中,只需将其永久包含在核心生产代码中你的构建过程。