Запуск кода для модулей Javascript

Question

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

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

Например, если у меня есть код, который присоединяет обработчики к кнопкам «назад / вперед», которые реализуют поведение карусели, имеет смысл поместить этот код в модуль «карусели».

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

Должен ли он быть в файле JS и выполняться, как только файл JS будет включен?

Или это должно быть в теге скрипта вверху (или внизу) HTML-файла?

Или не должно быть никакого конкретного кода, но файл JS должен определять, к каким элементам прикреплять обработчики и т. Д., На основе идентификатора / класса родительского элемента?

Какой метод больше всего вам подходит?

Answer 1

Мне нравится давать моим модулям js функцию Init () или Start (). Тогда какой код генерирует разметку, которая взаимодействует с JS, может также написать скрипт строки для вызова функции Init / Start. Таким образом, я также могу передавать параметры модулям при запуске, специфичные для этого экземпляра, даже иметь несколько экземпляров.

Answer 2

Я обычно разделяю каждый модуль в разных .js файлах. Каждый файл / модуль имеет собственную $(document).ready() (функция начальной загрузки jQuery) для правильной загрузки. Затем загрузите этот конкретный файл / модуль, просто добавив <script> соответствующим образом.

Это похоже на работу плагинов для популярных библиотек / сред JavaScript, все что вам нужно сделать, это включить их и применить поведение.

EDIT

Например, модель Carousel (carousel.js) будет выглядеть примерно так:

(function(){

    function bindNext(){...}
    function bindPrev(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        bindNext();
        bindPrev();
    });

})();

А может быть, другой модуль (foo.js):

(function(){

    function foo(){...}
    function bar(){...}

    // jQuery bootstrap
    $(document).ready(function(){
        foo();
        bar();
    });

})();

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

Answer 3

Я думаю о добавлении js-файлов в качестве импортируемых библиотек, а мой html-файл - в качестве основного приложения. Мне нравится делать любую инициализацию внутри тега скрипта после загрузки файлов. Я бы с осторожностью помещал материал в js-файл, который ссылается на определенные элементы на странице (кнопки «назад» / «вперед») по id или как угодно. Лучше настроить его так, чтобы вы могли настроить свой сценарий так, как вы хотите, перед его инициализацией.