Лучшие практики для разработки и сопровождения кода для сложных приложений на основе JQuery / JQueryUI

Question

Я работаю над своим первым очень сложным приложением на основе JQuery.

Одна веб-страница может содержать сотни кода, связанного с JQuery, например, для диалогов JQueryUI.

Теперь я хочу организоватькод в отдельных файлах.

Например, я перемещаю все диалоги инициализации с кодом $("#dialog-xxx").dialog({...}) в отдельные файлы, и из-за повторного использования я заключаю их в один вызов функции, как

диалогов.js

function initDialog_1() {
  $("#dialog-1").dialog({});
}

function initDialog_2() {
  $("#dialog-2").dialog({});
}

Это упрощает код функции и делает ясной страницу вызывающего абонента

$(function() {
  // do some init stuff
  initDialog_1();
  initTooltip_2();
});

Это правильный шаблон?

Используете ли вы более эффективные методы?

Я знаю, что разбиение кода во многих js-файлах приводит к уродливому использованию полосы пропускания, поэтому

Существует ли какая-либо полезная практика или инструмент для "объединения" файлов для производственных сред?

Я представляю какой-то инструмент, который выполняет больше работы, чем просто минимизирует и / или сжимает код JS.

Answer 1

Некоторые предложения, которые я мог бы добавить:

храните все свои переменные в глобально доступном, многоструктурном объекте, что-то вроде: MyVars = {dialogs: {}, подсказки: {}}, а затем используйте это во всех ваших сценариях

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

Чтобы привести в порядок вещи, вы можете прочитать это: http://betterexplained.com/articles/speed-up-your-javascript-load-time

Answer 2

Я сейчас работаю над чем-то довольно сложным в JS, и мне было интересно то же самое. Я посмотрел на различные реализации «модулей», но, хотя они выглядят «круто», они, кажется, не представляют особой ценности.

На данный момент я планирую продолжать ссылаться на множество файлов сценариев с моей страницы .html (план состоит в том, чтобы иметь только одну страницу .html или очень мало).

Затем, когда я собираю версию выпуска, я напишу очень простой инструмент, который будет вписываться в мой процесс сборки, который обнаружит все скрипты, на которые я ссылаюсь, со страниц .html, объединит их в один файл и заменит несколько элементов <script> с одним, так что в версии "release" необходим только один запрос.

Это позволит сжатию работать по всему тексту сценария, а не по каждому отдельному файлу (как, например, выполнение tar с последующим gzip) и должно иметь значение для времени загрузки сценария (хотя я должен подчеркнуть, что я не еще не реализовано).

Answer 3

Вы обычно хотите хранить весь свой javascript в одном файле. Меньше HTTP-запросов обычно лучше. Если вы посмотрите на источник jQuery, вы заметите, что каждая функция и свойство находятся прямо в глобальном объекте jQuery:

jQuery.fn = jQuery.prototype = {
    init: function(){ ... },
    animate: function() { ... },
    each: function() { ... },
    // etc
}

Однако шаблон, который вам кажется интересным, похож на шаблон "модуля". Инфраструктура YUI использует этот шаблон и позволяет разработчикам «запрашивать» различные компоненты библиотеки из основного модуля через HTTP-запрос. Вы можете прочитать больше о YUI здесь:

http://developer.yahoo.com/yui/3/yui/

Answer 4

Это звучит довольно хорошо, я тоже. Всего две ноты:

1. Использовать описательные имена методов. «initDialog_1» ничего не говорит вам об диалоговом окне, которое он инициализирует.

2. Сохранение кода JS на несколько файлов облегчает разработку, но снижает производительность вашего интерфейса. Вы можете объединить все файлы в один во время сборки / развертывания / выполнения вашего приложения. Как это сделать лучше всего сильно зависит от вашей среды.