Javascript Modular Layout: Как вызвать функцию, определенную в одном модуле, из другого?

Question

Ниже приведен пример модульной компоновки приложения javascript.Я хочу начать использовать такую ​​структуру для своей работы.Я изо всех сил пытаюсь понять, как это работает, и мне нужно понять, как вызвать функцию, определенную в одном модуле, из другого модуля?Это определенно лучший способ создать приложение на JavaScript?

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(){
        var someFunction = function(){ alert('I alert first'); };

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); };

        return { 
            init: someFunction
        };
    }());

    return { 
        init: function(){
            for (var key in modules){
                modules[key].init();
            }
        }
    };
}(jQuery, this, document));

$(window.MainModule.init);

Answer 1

Модульность с RequireJS :

module1.js

define( ["dependency"] , function( dep ){

   return {
      speak: function(){
          alert( dep.message );
      }
   }

} );

dependency.js

define( {
    message: "Hello world!"
} );

impl.js

if ( $(".someCssExpression").length ) {
    require( [ "module1" ] , function( mod ){

        mod.speak();

    });
}

index.html

...

<script src="require.js" data-main="impl"></script>

...

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

Требуется некоторое привыкание, но оно того стоит.

Также читайте:

• ScriptJunkie article

Answer 2

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

Вы можете использовать шаблон Пространства имен, например, Yahoo, и просто создать отличный фреймворк для своего приложения.вам не нужно, чтобы ваши модули запускались на каждой странице, как вы это делали при создании экземпляра основного модуля (в этом нет никакого смысла, если только у вас нет виджета на каждой странице вашего сайта).

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

Кстати, вы всегда можете разработатьОО стиль с использованием MooTools, и это действительно бесконечно. Все сводится к потребностям вашего приложения

Я бы действительно рекомендовал бы вам посмотреть несколько лекций Дугласа Крокфорда (как было сказано до меня) и здесь - хорошая статья о модулях, которая может помочь вам понять ее немного дальше. Удачи!

Answer 3

Чтобы получить доступ ко всему, это должно быть доступно в области, из которой вы звоните. «Модуль» - или любой другой метод капсуляции - в JS всегда означает «функция». Модуль - это просто анонимная (безымянная) функция. Таким образом, чтобы получить доступ к элементу, определенному в другой функции B (модуле) изнутри функции A, он либо должен быть доступен в ГЛОБАЛЬНОЙ ОБЛАСТИ (в браузерах: объект окна), либо ИЛИ должен получить доступ другим способом, например, получив ссылку через какой-то вызов функции. YUI3 ([http://developer.yahoo.com/yui/3/]) является интересным примером для последнего, там нет ничего из вашего приложения, когда-либо доступного в глобальном масштабе (я считаю, что YUI3 одна из самых лучших JS-фреймворков для разработки SERIOUS softwarfe, также определенно проверяю ) http://developer.yahoo.com/yui/theater/, особенно любые видео от Дугласа Крокфорда, Бога Javascript (и я обычно не даю таких утверждений). С Javascript нужно помнить, что часть того, что в таких языках, как C, выполняется компилятором, теперь происходит во время выполнения. Для таких вещей, как непосредственные вызовы функций, которые возвращают функцию (вызывая инкапсуляцию посредством использования замыканий), вы должны помнить, что этот код выполняется ТОЛЬКО ОДИН РАЗ В ТЕЧЕНИЕ ЗАГРУЗКИ, но во время выполнения выполняется совершенно другой код - который зависит от того, какой код выполняется при загрузке. сделал.

В вашем примере функция после window.MainModule = ... выполняется при загрузке кода JS. Обратите внимание, что window.MainModule НЕ УКАЗЫВАЕТ НА ЭТО ФУНКЦИЮ !!! Вместо этого эта функция, как я уже сказал, выполняется под нагрузкой, и RESULT присваивается window.MainModule. Что в итоге? Ну, есть только один оператор return, и он возвращает и объект, и у объекта есть только одно свойство «init», которое указывает на анонимную функцию.

Однако перед возвратом этого объекта эта функция создает переменную «модули» в своей локальной области видимости, которая указывает на объект. У объекта есть два свойства, и этим свойствам назначаются функции так же, как и в window.MainModule, поэтому у вас всего три замыкания.

Итак, после загрузки у вас есть одна глобальная переменная

window.MainModule = { init: function () {...}

Итак, после загрузки у вас есть одна глобальная переменная

window.MainModule = { init: function () {...} }

В последней строке эта функция выполняется.

}

В последней строке эта функция выполняется.

Этот пример не имеет большого смысла, потому что вы ничего не инкапсулируете. Вы делаете доступной приватную функцию с двойными указателями: от init до локальной переменной someFunction, ничего не скрыто. Проверьте приведенные выше URL (Yahoo Developer Theater) для лучших примеров и очень подробных объяснений. Это ОБЯЗАТЕЛЬНО, даже если вы никогда не трогаете YUI3 - особенно видео Д. Крокфорда - это общее ноу-хау JS.