javascript - 如何轻松维护一个跨文件的 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);