Лучшие практики для загрузки Javascript

Question

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

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

Лучше ли устанавливать такие клики на каждой отдельной странице,

<a id="link1" href="#" onclick="myFunc()" />

Или функция подготовки очень длинного документа во внешнем js-файле,

Element.observe(window, 'load', function() {
  if ($('link1')) {
    // set click handler
  }
  if ($('link2')) {
   // set click hanlder
  }
  ...
}

Или разбить каждый раздел if ($('link')) {} на теги сценариев и поместить их на соответствующие страницы,

Или, наконец, разделить каждый раздел if ($('link')) {} на отдельный файл js и загрузить их на странице?

Решение 1 кажется наименее элегантным и относительно навязчивым, решение 2 приведет к очень длительной функции загрузки, решение 3 менее навязчиво, чем 1, но все же невелико, а решение 4 потребует загрузки пользователем отдельного JS файл на страницу, которую он посещает.

Являются ли какие-либо из этих лучших (или худшими) или есть решение 5, о котором я не думаю?

Редактировать: я спрашиваю о шаблоне проектирования, а не о том, какую функцию загрузки следует использовать.

Answer 1

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

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

<a href="#" class="more-info">More info</a>

И ваш JavaScript может выглядеть так:

jQuery(".more-info").click(function() { ... });

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

По сути, вы сосредотачиваетесь на поведении для каждого типа элемента, к которому вы присоединяете JavaScript, вместо того, чтобы выбирать конкретные идентификаторы элементов для присоединения функциональности.

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

В любом случае, я бы не рекомендовал прикреплять onlick непосредственно в html (опция # 1). Это навязчиво и ограничивает гибкость вашего JavaScript.

Редактировать: я не знал, что Диодей опубликовал очень похожий ответ (с которым я согласен).

Answer 2

Вы можете взломать имя класса и использовать его творчески:

<a class="loadevent functionA" id="link1" href="#" onclick="myFunc()" />

... на другой странице ...

<a class="loadevent functionB" id="link1" href="#" onclick="myFunc()" />

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

Answer 3

Прежде всего, я не понимаю, почему вы думаете, что установка слушателей событий навязчива?

но ...

Решение первое - плохая идея

<a id="link1" href="#" onclick="myFunc()" />

потому что вы должны держать свой макияж и свои сценарии раздельно.

Второе решение - плохая идея

Element.observe(window, 'load', function() {
  if ($('link1')) {
    // set click handler
  }
  if ($('link2')) {
   // set click hanlder
  }
  ...
}

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

Решение третье - плохая идея по той же причине, по которой я сказал, что решение первое - плохая идея.

Решение 4 - лучшая идея, да, это одна дополнительная загрузка на страницу, но если для каждой страницы вы просто разбиваете каждый раздел if ($ ('link')) {}, размер файла не может быть таким большим? Кроме того, если вы удалите этот код из глобального javascript, тогда время его загрузки будет уменьшено.

Answer 4

Я бы использовал JQuery's документ готов , если возможно

  $(document).ready(function() {

      // jQuery goodness here.
 });

Answer 5

Имея много разных страниц, я бы позволил по-разному обрабатывать события для этих страниц ...

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

Последнее, к чему я бы прибегнул, это использовать (большую) библиотеку (jquery, mootools или что-то еще! -), если я не собирался использовать ее каким-либо другим способом ...

Теперь вы говорите о передовых практиках, передовая практика всегда будет то, что ваши пользователи будут воспринимать как самое легкое решение, и в этом, пользователи должны быть поняты как можно шире, включая разработчиков и так далее, кто должен поддерживать этот сайт! o]

Answer 6

Без обращения к jQuery о коленях, если JS с изменяющейся страницей относительно легкий, я бы включил его в скрипт встроенного заголовка (привязка к триггеру события onload, да), аналогично # 4, но я бы не стал делать это как отдельный сценарий JS и загрузка, я бы хотел обработать это с помощью серверной стороны - однако вы хотите обработать это (я? Я бы пошел с XSLT включает).

Это дает вам как высокую степень модульного разделения, так и загрузку максимально легкую.

Answer 7

Хотя Крис несколько прав в этом, вы можете сделать это:

$(document.ready(function() {
  // A
});
$(document.ready(function() {
  // B
});
$(document.ready(function() {
  // C
});

и будут вызваны все функции (в порядке их появления), стоит отметить, что событие ready () не совсем то же самое, что и onload () Из документов jQuery API :

Связывает функцию, которая будет выполнена всякий раз, когда ДОМ готов пройденный и управляемый.

Вместо этого вы можете захотеть событие load () :

$(document).load(function() {
  // do stuff
});

, который будет ожидать загрузки изображений и т. П.