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 Compiler中，只使用默认的Compression，然后我就可以使用一个很好的JavaScript文件上网进行制作。

这项技术对我来说非常有效 - 因为它在DOM中只创建了一个全局足迹，并为我提供了一个非常灵活的框架来增加应用程序的每个附加功能。但是 - 我真的不想将整个应用程序保存在一个JavaScript文件中。

我想在开发过程中将一个大的uniqueApplication.js文件转换为为应用程序中的每个功能分别创建一个文件，featureOne.js - featureTwo.js - featureThree.js

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

我看到Google Closure Compiler支持传入模块的参数，但我真的无法找到关于这样做的大量信息。

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

Answer 1

看看这个图书馆是如何建立的 http://github.com/oyvindkinsey/easyXDM

文件是分开的，但是合并在一起，放在一个闭包中，然后由ant脚本（build.xml）运行jslint。

ant脚本还执行条件'编译'，字符串替换和缩小。

Answer 2

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 3

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

AMD格式似乎满足了您的大多数要求，并且正在迅速成为事实上的标准。

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

3 个答案: