如何轻松维护跨文件JavaScript库开发环境 [英] How can I easily maintain a cross-file JavaScript Library Development Environment

问题描述

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

I have been developing a new JavaScript application which is rapidly growing in size.

我的整个JavaScript应用程序已通过以下方式封装在单个函数中，单个文件中:

My entire JavaScript Application has been encapsulated inside a single function, in a single file, in a way like this:

(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
   };
})();

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

In the same file after the anonymous function and execution I do something like this:

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

在在线上传此软件之前，我仅使用默认的Compression将我的JavaScript文件及其所有依赖项传递到Google Closure Compiler中，然后准备好一个不错的JavaScript文件投入生产.

Before uploading this software online I pass my JavaScript file, and all it's dependencies, into Google Closure Compiler, using just the default Compression, and then I have one nice JavaScript file ready to go online for production.

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

This technique has worked marvelously for me - as it has created only one global footprint in the DOM and has given me a very flexible framework to grow each additional feature of the application. However - I am reaching the point where I'd really rather not keep this entire application inside one JavaScript file.

我想从开发过程中拥有一个大的uniqueApplication.js文件转移到为应用程序中的每个功能(featureOne.js-featureTwo.js-featureThree.js)拥有一个单独的文件

I'd like to move from having one large uniqueApplication.js file during development to having a separate file for each feature in the application, featureOne.js - featureTwo.js - featureThree.js

完成离线开发测试后，我想使用某种东西(也许是Google Closure编译器)将所有这些文件组合在一起-但是我希望这些文件全部在该范围内进行编译，因为它们当时是我将它们放在一个文件中-我希望它们在脱机测试期间也保持在同一范围内.

Once I have completed offline development testing, I would then like to use something, perhaps Google Closure Compiler, to combine all of these files together - however I want these files to all be compiled inside of that scope, as they are when I have them inside one file - and I would like for them to remain in the same scope during offline testing too.

我看到Google Closure Compiler支持传入模块的参数，但是我实际上并没有找到很多有关执行此类操作的信息.

I see that Google Closure Compiler supports an argument for passing in modules but I haven't really been able to find a whole lot of information on doing something like this.

任何人都不知道如何实现这一目标-或关于在多个文件上编写单个JavaScript库的开发实践的任何建议，而这些文件仍然只在DOM上留下一个足迹?

Anybody have any idea how this could be accomplished - or any suggestions on a development practice for writing a single JavaScript Library across multiple files that still only leaves one footprint on the DOM?

推荐答案

jQuery github 有一个与您所说的类似的设置.甚至还有一个 Makefile /

The jQuery github has a similar setup to the one you speak of. There is even a Makefile / ant build.xml that use the google closure complier.

基本概念是将所有内容开发到单独的文件中，然后使用cat(或类似方式)将所有文件放在一起.

The basic concept is to develop all your stuff in separate files, then use cat (or something similar) to put all the files together.

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

jQuery的intro.js和outro.js中的代码:

The code inside intro.js and outro.js from jQuery:

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

 // outro.js
 })(window);

这篇关于如何轻松维护跨文件JavaScript库开发环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！