Почему Stackoverflow динамически связывает действия пользователя с javascript?

Question

Проверка источника HTML вопроса, который я вижу, например:

<a id="comments-link-xxxxx" class="comments-link">add comment</a><noscript>&nbsp;JavaScript is needed to access comments.</noscript>

А потом в источнике javascript:

// Setup our click events..
$().ready(function() {    
        $("a[id^='comments-link-']").click(function() { comments.show($(this).attr("id").substr("comments-link-".length)); });    
});

Похоже, что все события щелчков пользователя связаны таким образом.

Недостатки этого подхода очевидны для людей, просматривающих сайт без JavaScript, но каковы преимущества динамического добавления событий с помощью JavaScript по сравнению с их непосредственным объявлением?

Answer 1

• Вам не нужно вводить одну и ту же строку снова и снова в HTML (что, если больше ничего не увеличит количество опечаток для отладки)
• Вы можете передать HTML / CSS дизайнеру, который не должен обладать какими-либо навыками JavaScript
• У вас есть программный контроль над тем, какие обратные вызовы вызываются и когда
• Это более элегантно, потому что соответствует концептуальному разделению между макетом и поведением
• Проще модифицировать и реорганизовать

В последнем пункте представьте, хотите ли вы добавить значок «Показать комментарии» где-то еще в шаблоне. Было бы очень легко привязать тот же самый обратный вызов к иконке.

Answer 2

Присоединение событий через API событий вместо разметки - это ядро ​​ненавязчивого JavaScript. Вы можете прочитать эту статью в Википедии , чтобы получить полный обзор того, почему ненавязчивая javascripting важна.

Так же, как вы отделяете стили от разметки, вы хотите отделить сценарии от разметки, включая события.

Answer 3

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

Разделение представления и логики.

HTML / CSS по сути является языком представления. Javascript для создания логики. Хорошая практика - по возможности отделять любую логику от вашей презентации.

Answer 4

Таким образом, вы можете иметь легкую страницу, где вы можете обрабатывать все свои действия с помощью JavaScript. Вместо того, чтобы использовать множество различных URL-адресов и действий, встроенных в страницу, просто напишите одну функцию javascript, которая находит ссылку и подключает ее, независимо от того, где на странице вы создаете ссылку «комментарий». Это экономит загружает повторения HTML:)

Answer 5

Единственное преимущество, которое я вижу, - это уменьшение размера страницы и, следовательно, снижение потребности в полосе пропускания.

Редактировать: Поскольку меня опускают, позвольте мне встретиться, чтобы объяснить мой ответ.

Я хочу сказать, что использование ссылки в качестве пустого якоря - это просто плохая практика, и ничего более! Конечно, отделение JavaScript logic от HTML - это здорово. Конечно, проще выполнить рефакторинг и отладку. Но здесь это противоречит основному принципу ненавязчивого JavaScript: Изящная деградация !

Хорошим решением было бы иметь возможность вызова комментариев: один через РЕАЛЬНУЮ ссылку, которая будет указывать на простую страницу, показывающую комментарий, и другой, который возвращает только комментарии (в формате JSON или аналогичном формате) с Цель вызова через AJAX для непосредственного введения на главную страницу.

При этом метод, использующий метод AJAX, должен также позаботиться об отмене другого вызова, чтобы пользователь не был перенаправлен на простую страницу. Это был бы ненавязчивый JavaScript. Вот только JavaScript вставил неправильно используемый тег привязки.