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

How can I split a javascript application into multiple files?

本文关键字：文件 拆分 应用程序 javascript      更新时间：2023-09-26

我创建了一个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();
};

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

看看本文中的设计模式：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文件），则添加到其中，否则创建它

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

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

--------------------------------文件main.js:------------------

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

--------------------------------文件游戏.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 );
}

--------------------------------文件索引.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>

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

示例：

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

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

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

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

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

我最喜欢的解决方案是使用服务器端脚本将其他文件包含在我的"主"文件中。例如，使用Perl的模板工具包：

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';
  ?>
}
相关文章：