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

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

41 голосов
/ 06 января 2012

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

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

Ответы [ 5 ]

39 голосов
/ 11 января 2012

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

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

4 голосов
/ 20 ноября 2012

, чтобы не вводить в заблуждение, но исходя из фона C ++, я попытался создать нечто, напоминающее что-то вроде пространства имен c ++, способом, описанным ниже. это работает, но я хотел бы знать, является ли это приемлемым шаблоном для ОП?

-------------------------------- файл main.js: ---------- ------ 

var namespacename = function(){}

namespacename.mainvalue = 5;

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

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

-------------------------------- файл 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>
2 голосов
/ 06 января 2012

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

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

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

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

1 голос
/ 06 января 2012

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

Пример: 

require(["dir/file"], function() {
    // Called when file.js loads
});
0 голосов
/ 06 января 2012

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

Нет похожих вопросов

...