Как правильно разделить js-код?

Question

[andreyqin]

Возникла необходимость разбить js-код по нескольким файлам, так как некоторый код используется не на всех страницах сайта. Выделил main.js, собственные плагины banner.js и carousel.js. И вот с последним возникла проблема. Каждый файл имеет следующую обертку:

(function($) {
    $(document).ready(function() {
        /* тут какой-то код */
    });
})(jQuery);

Последовательность подключения файлов:
banner.js
carousel.js
main.js

Дело в том, что в main.js используется функция из carousel.js, но мне выдает ошибку, что такая функция не определена. Я убрал выше приведенную обертку у carousel.js и ошибка перестала возникать, но теперь плагин вообще перестал работать, так как из-за отстутствия $(document).ready() он не находит нужные элементы на странице.
Как правильно организовать структуру и подключение файлов в моем случае?

Answer 1

[sasha]

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

Comments

[andreyqin]

В main.js так же присутствует $(document).ready(), но это не решает проблему.

[sasha]

"подключение мейна должно идти ПОСЛЕ подключение карусельки, у мейна должно быть тоже события на $(document).ready()."

[sasha]

@andreyqin ключевое слово - ПОСЛЕ

[andreyqin]

@madmages, перечитайте еще раз мой вопрос

Answer 2

[Mikhail Osher]

RequireJS.

Comments

[andreyqin]

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

Answer 3

[andreyqin]

Пока что сделал так: в carousel.js, в самом начале, перед оберткой, объявил глобальные переменные, соответствующие моим функциям в этом модуле. А внутри обертки присваиваю этим переменные нужные функции:

var myFunc, myFunc2, myFunc3;
(function($) {
    $(document).ready(function() {
        myFunc = function () {
            /* ... */
        }
        myFunc2 = function () {
            /* ... */
        }
    });
})(jQuery);

Работает, но что-то мне подсказывает, что это самая неправильная реализация из всех возможных. Про пространства имен не понял где нужно объявлять.