Question

我创建了一个包含一个文件中所有代码的javascript应用程序。该应用程序已经增长了很多，我认为是时候将它分成多个文件，但我很难搞清楚如何做到这一点。我认为问题在于我如何决定构建应用程序，该应用程序使用以下模板：

var myApp = function(){

    //there are several global variables that all of the modules use;
    var global1, global2, module1, module2;

    global1 = {
        prop1:1
    };

    //There are also several functions that are shared between modules
    function globalFunction(){

    }

    var ModuleOne = function(){

        function doSomething(){
            //using the global function
            globalFunction();
        }

        return{
            doSomething:doSomething
        }
    };

    var ModuleTwo = function(){

        function doSomething(){
            //module 2 also needs the global function
            globalFunction();

            //Use the functionality in module 1
            //I can refactor this part to be loosely coupled/event driven
            module1.doSomething();
        }
    };

    module1 = new ModuleOne();
    module2 = new ModuleTwo();
};

即使所有模块都是松散耦合和事件驱动的，我仍然不知道如何在每个模块依赖共享函数/变量的情况下将其拆分为多个文件。有没有人有建议？

Answer 1

看一下本文中的设计模式：http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - 您可以将模块定义拆分为多个文件，以便共享公共属性，但也可以创建私有的变量或方法到特定文件。

基本思想是单个JS文件使用以下代码添加到同一模块：

var MODULE = (function (my) {
     var privateToThisFile = "something";

    // add capabilities...

     my.publicProperty = "something";

    return my;
}(MODULE || {}));

在每个JS文件中，如果已经定义了MODULE（来自另一个JS文件），则添加到它，否则你创建它。您可以对其进行设置，使其（大部分）与各种文件的顺序无关。

文章详细介绍了几种变体，当然你可能会想出自己的调整......

Answer 2

不是为了增加混乱，而是来自C ++背景，我试图以下面描述的方式构造类似于c ++命名空间的东西。它有效，但我想知道这是否是OP的可接受模式？

-------------------------------- file main.js：---------- ------

var namespacename = function(){}

namespacename.mainvalue = 5;

namespacename.maintest = function() {
    var cm = new namespacename.game();
    cm.callme();
}

-------------------------------- file game.js：---------- ------

namespacename.gamevalue = 15;

namespacename.game = function(){
    this.callme = function(){
        console.log( "callme" );
    }
}

namespacename.gametest = function() {
    console.log( "gametest:gamevalue:" + this.gamevalue );
    console.log( "gametest:mainvalue:" + this.mainvalue );
}

-------------------------------- file index.html：---------- ----

<html>
    <head>
        <title>testbed</title>
    </head>

    <body onload="init();">
    </body>

    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="game.js"></script>

    <script type="text/javascript">

        init = function() 
        {
            namespacename.maintest();
            namespacename.gametest();

            console.log( "html main:" + namespacename.mainvalue );
            console.log( "html game:" + namespacename.gamevalue );
        }

   </script>
</html>

Answer 3

您可以将共享函数和共享模块放在myApp对象上，这样它们就不会污染全局命名空间，但可以在任何地方访问，而不必在同一个闭包内。

myApp.moduleOne = function() {...}
myApp.moduleTwo = function() {...}
myApp.globalFunction = function() {...}

然后，您可以在任何文件中定义它们并在任何文件中使用它们。

您也可以将文件分成多个文件，但要求它们包含在保留关闭的特定顺序中。如果您出于实际编辑原因分解文件，但重新组合并最小化它们以进行实际部署，那么就编写代码或如何部署代码而言，这将不会花费您任何成本，但会为您提供大量较小的文件为方便编辑。

Answer 4

给require.js一个机会。 http://requirejs.org/

示例：

require(["dir/file"], function() {
    // Called when file.js loads
});

Answer 5

我最喜欢的解决方案是使用服务器端脚本将其他文件包含在我的“main”文件中。例如，使用Perl的Template Toolkit：

var myApp = function(){
    [% INCLUDE lib/module1.js %]
    [% INCLUDE lib/module2.js %]
    [% INCLUDE lib/module3.js %]
}

或PHP：

var myApp = function(){
  <?php
    include 'lib/module1.js';
    include 'lib/module2.js';
  ?>
}

如何将javascript应用程序拆分为多个文件？

5 个答案: