如何将javascript应用程序拆分为多个文件？ [英] How can I split a javascript application into multiple files?

问题描述

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

I created a javascript application with all of the code in one file. The application has grown quite a bit and I think it's time to split it up into multiple files, but I'm having a hard time figuring out how to do this. I think the problem lies with how I have decided to build the app, which uses the following template:

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

即使所有模块都是松散耦合和事件驱动的，我仍然不知道我是怎么做的鉴于每个模块依赖于共享函数/变量，我们会将其拆分为多个文件。有没有人有建议？

Even if all of the modules were loosely coupled and event driven, I still don't know how I would go about splitting this into multiple files given each module's reliance on the shared functions/variables. Does anyone have suggestions?

推荐答案

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

Take a look at the design pattern in this article: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - you can split your module definition across multiple files in a way that lets common properties be shared but also lets you create variables or methods that are private just to a particular file.

基本的想法是单个JS文件添加到相同的模块，代码如下：

The basic idea is that the individual JS files add to the same module with code like this:

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

    // add capabilities...

     my.publicProperty = "something";

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

每个JS文件中的位置如果 MODULE 是已经定义（从另一个JS文件）你添加到它，否则你创建它。您可以对其进行设置，以便（大多数情况下）无关紧要包含各种文件的顺序。

Where in each JS file if MODULE is already defined (from another JS file) you add to it otherwise you create it. You can set it up so that it (mostly) doesn't matter what order the various files are included in.

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

The article details several variations, and of course you'll probably come up with your own tweaks...

这篇关于如何将javascript应用程序拆分为多个文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！