代码之家  ›  专栏  ›  技术社区  ›  John

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

  •  4
  • John  · 技术社区  · 15 年前

    我一直在开发一个新的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闭包编译器中,然后我有一个很好的javascript文件准备上线生产。

    这项技术对我来说非常有效,因为它在DOM中只创建了一个全局足迹,并为我提供了一个非常灵活的框架来扩展应用程序的每个附加功能。不过,我已经到了不希望将整个应用程序保存在一个javascript文件中的地步。

    我想从开发过程中有一个大型uniqueapplication.js文件过渡到为应用程序中的每个功能都有一个单独的文件featureOne.js-featureTwo.js-featureTree.js。

    一旦我完成了离线开发测试,我就想使用一些东西,也许是Google闭包编译器,将所有这些文件组合在一起——但是我希望这些文件都在这个范围内编译,就像我将它们放在一个文件中时一样——我希望它们在离线测试期间保持在同一个范围内。也一样。

    我看到google closure compiler支持传递模块的论点,但是我还没有找到很多关于这样做的信息。

    任何人都知道这是如何实现的——或者对于在多个文件中编写单个javascript库的开发实践有什么建议,而这些文件在DOM上只留下一个封装外形?

    3 回复  |  直到 13 年前
        1
  •  2
  •   gnarf    15 年前

    这个 jQuery github 有一个类似的设置,你所说的。甚至还有一个 Makefile / ant build.xml 使用谷歌关闭编译器。

    基本概念是在单独的文件中开发所有的东西,然后使用 cat 把所有的文件放在一起。

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

    内部代码 intro.js outro.js 来自jQuery:

     // intro.js
     (function(window, undefined) {
    
     // outro.js
     })(window);
    
        2
  •  2
  •   Sean Kinsey    15 年前

    看看这个图书馆是怎么建的
    http://github.com/oyvindkinsey/easyXDM

    这些文件是分开的,但合并在一起,放在一个闭包中,并贯穿 jslint 通过Ant脚本(build.xml)。

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

        3
  •  0
  •   Stephen Chung    14 年前

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

    AMD格式似乎满足了您的大部分需求,并且正在迅速成为事实上的标准。