如何轻松维护跨文件的 JavaScript 库开发环境

Question

我一直在开发一个新的 JavaScript 应用程序，该应用程序的规模正在迅速增长。

我的整个 JavaScript 应用程序已封装在单个函数、单个文件中，方式如下：

(function(){  
   var uniqueApplication = window.uniqueApplication = function(opts){
      if (opts.featureOne)
      {
         this.featureOne = new featureOne(opts.featureOne);
      }
      if (opts.featureTwo)
      {
         this.featureTwo = new featureTwo(opts.featureTwo);
      }
      if (opts.featureThree)
      {
         this.featureThree = new featureThree(opts.featureThree);
      }
   };

   var featureOne = function(options)
   {
       this.options = options;
   };
   featureOne.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureTwo = function(options)
   {
       this.options = options;
   };
   featureTwo.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureThree = function(options)
   {
       this.options = options;
   };
   featureThree.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };
})();

在匿名函数和执行之后的同一个文件中，我执行如下操作：

(function(){
   var instanceOfApplication = new uniqueApplication({
       featureOne:"dataSource",
       featureTwo:"drawingCanvas",
       featureThree:3540
   });
 })();

在在线上传此软件之前，我传递了我的 JavaScript 文件，及其所有依赖项，放入 Google Closure 编译器中，仅使用默认压缩，然后我就有了一个漂亮的 JavaScript 文件，可以在线进行生产。

这项技术对我来说效果非常好 - 因为它只在 DOM 中创建了一个全局足迹，并且为我提供了一个非常灵活的框架来扩展应用程序的每个附加功能。然而，我已经达到了这样的地步：我真的不想将整个应用程序保存在一个 JavaScript 文件中。

我希望从开发期间拥有一个大型 uniqueApplication.js 文件转变为为应用程序中的每个功能拥有一个单独的文件，featureOne.js - featureTwo.js - featureThree.js

一旦我完成了离线开发测试，我就会喜欢使用某种东西，也许是 Google Closure Compiler，将所有这些文件组合在一起 - 但是我希望这些文件都在该范围内编译，就像我将它们放在一个文件中一样 - 我希望它们能够离线测试期间也保持在相同范围内。

我看到 Google Closure Compiler 支持传入模块的参数，但我还没有真正找到有关执行此类操作的大量信息。

任何人都知道如何实现这一点 - 或者对跨多个文件编写单个 JavaScript 库但仍然只在 DOM 上留下一个足迹的开发实践有任何建议吗？

Answer 1

jQuery github 具有与您所说的类似的设置。甚至还有一个 Makefile / ant build.xml 使用谷歌闭包编译器。

基本概念是在单独的文件中开发所有内容，然后使用cat（或类似的东西）将所有文件放在一起。

 cat intro.js core.js featureOne.js featureTwo.js featureThree.js outro.js > build/script.js

来自 jQuery 的 intro.js 和 outro.js 内的代码：

 // intro.js
 (function(window, undefined) {

 // outro.js
 })(window);

Answer 2

看看这个库是如何构建的
http://github.com/oyvindkinsey/easyXDM

文件是分开的，但是合并在一起，放入闭包，并通过 ant 脚本 (build.xml) 运行 jslint。

ant 脚本还执行条件“编译”、字符串替换和缩小。

Answer 3

我建议您将代码库拆分为 AMD/RequireJS 样式的模块。

AMD 格式似乎可以满足您的大部分要求，并且正在迅速成为事实上的标准。