javascript - 为 JavaScript 实验组织 DRY 模板？

Question

我正在构建一个相当大规模的 JavaScript Backbone.js 应用程序，其文件夹结构如下:

app
  index.html

libs
  underscore
  jquery
  [...]

src
  utils
  modules
  [...]

index.html 文件基本上加载所有 Backbone.js 路由器等，并实例化 AMD 模块等。

但是，我经常发现需要创建基本上与大应用程序共享依赖项的小型应用程序。

假设我需要创建 3 个小实验(单独的页面)，它们都加载相同的常见嫌疑人(下划线、 Backbone 和我编写的几个实用程序库和模块)。

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

如何让这个实验保持干燥？
如何设置这个“可扩展模板”？

Answer 1

在我看来，这就是拥有一个好的构建系统的用武之地。您的设置越复杂，设置配置文件就越有用，这些配置文件可以将您的依赖关系管理整合到一个地方。这在以下情况下变得尤为重要:

• 您需要在多个静态页面上加载相同的依赖集，但您的依赖列表在开发过程中经常发生变化。

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

我通常使用 Apache Ant为此，但那里有很多构建系统。我过去所做的是:

1. 设置 index.tmpl.html包含核心 HTML 标记和占位符的文件，用于 JS 脚本、CSS 文件和下划线模板。

2. 制作 build.properties定义我的依赖项列表的文件。您可以在不同的属性名称下以不同的方式对它们进行分组，例如lib.scripts.all或 util.scripts.all .

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

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

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

这将使您可以非常灵活地重用代码的不同部分，并且还有一个额外的好处是可以更轻松地将“实验”移动到您的核心生产代码中，只需将其永久包含在您的代码中即可构建过程。