Как я могу разделить приложение javascript на несколько файлов?

Я создал приложение 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();
};

Даже если все модули были слабо связаны и управлялись событиями, я до сих пор не знаю, как бы я разделил это на несколько файлов, учитывая, что каждый модуль использует общие функции/переменные. У кого-нибудь есть предложения?

Ответ 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 файла), вы добавляете его, иначе вы его создадите. Вы можете настроить его так, чтобы он (в основном) не имел значения, в какой порядок включены различные файлы.

В статье описаны несколько вариантов, и, конечно же, вы, вероятно, придумаете свои собственные твики...

Ответ 2

Не добавляйте к путанице, но, исходя из фона С++, я попытался построить что-то, похожее на нечто вроде пространства имен С++, описанным ниже. он работает, но я хотел бы знать, является ли это приемлемым шаблоном для OP?

-------------------------------- файл 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>

Ответ 3

Вы можете поместить общие функции и общие модули в объект myApp, чтобы они не загрязняли глобальное пространство имен, но могут быть доступны в любом месте, не находясь внутри одного и того же закрытия.

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

Затем вы можете определить их в любом файле и использовать их в любом файле.

Вы также можете просто разбить файл на несколько файлов, но потребовать, чтобы они были включены в определенный порядок, который сохраняет ваше закрытие. Если вы разбираете файлы по практическим причинам редактирования, но рекомбинируете и сворачиваете их для фактического развертывания, то это не будет стоить вам ничего с точки зрения того, как вы пишете код или как его развертываете, но даст вам множество небольших файлов для удобства редактирования.

Ответ 4

Дайте require.js выстрел. http://requirejs.org/

Пример:

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

Ответ 5

Моим любимым решением для этого является использование сценариев на стороне сервера, чтобы включить другие файлы в мой "основной" файл. Например, используя 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';
  ?>
}