Почему плохой практикой является использование ссылок с javascript: "protocol"?

Question

В 1990-х годах была мода помещать код Javascript прямо в <a> атрибуты href, например:

<a href="javascript:alert('Hello world!')">Press me!</a>

И вдруг я остановился, чтобы увидеть это. Все они были заменены такими вещами, как:

<a href="#" onclick="alert('Hello world!')">Press me!</a>

Для ссылки, единственной целью которой является запуск кода Javascript, и она не имеет реального href цель, почему рекомендуется использовать onclick собственность вместо href имущество?

Answer 1

Контекст выполнения другой, чтобы увидеть это, попробуйте следующие ссылки:

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript: выполняется в глобальном контексте, а не как метод элемента, который обычно требуется вам. В большинстве случаев вы делаете что-то с элементом, с которым вы действовали, или в связи с ним, лучше выполнить это в этом контексте.

Кроме того, это намного чище, хотя я бы вообще не использовал встроенный скрипт. Проверьте любые рамки для обработки этих вещей в более чистом виде. Пример в jQuery:

$('a').click(function() { alert(this.tagName); });

Answer 2

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

• http://www.alistapart.com/articles/behavioralseparation
• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

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

Answer 3

Пара причин:

1. Плохая практика кода:
   Тег HREF должен указывать, что существует гиперссылка на другое местоположение. Использование того же тега для функции javascript, которая фактически никуда не ведет пользователя, является плохой практикой программирования.

2. Проблемы с SEO:
   Я думаю, что веб-сканеры используют тег HREF для сканирования по всему веб-сайту и связывания всех связанных частей. Вставляя javascript, мы нарушаем эту функциональность.

3. Ломает доступность:
   Я думаю, что некоторые программы чтения с экрана не смогут выполнить javascript и могут не знать, как обращаться с javascript, пока они ожидают гиперссылку. Пользователь будет ожидать увидеть ссылку в строке состояния браузера при наведении на нее ссылки, в то время как он увидит строку вроде: "javascript:", которая может их запутать и т. Д.

4. Вы все еще в 1990-х годах:
   Основной совет - размещать свой javascript в отдельном файле и не смешивать его с HTML-кодом страницы, как это было сделано в 1990-х годах.

НТН.

Answer 4

Я открываю множество ссылок в новых вкладках - только чтобы увидеть javascript:void(). Таким образом, вы раздражаете меня, а также себя (потому что Google увидит то же самое).

Другая причина (также упоминаемая другими) заключается в том, что разные языки должны быть разделены на разные документы. Зачем? Что ж,

• Смешанные языки не очень хорошо поддерживаются большинством IDE и валидаторов. Встраивание CSS и JS в HTML-страницы (или что-нибудь еще в этом отношении) в значительной степени разрушает возможности статической проверки встроенного языка на корректность. Иногда и язык встраивания. (Документ PHP или ASP не является допустимым HTML.) Вы не хотите, чтобы синтаксические ошибки или несоответствия отображались только во время выполнения.
• Другой причиной является более четкое разделение между типами вещей, которые вам нужно указать: HTML для контента, CSS для макета, JS обычно для большего макета и внешнего вида. Они не отображают один на один: обычно вы хотите применить макет ко всем категориям элементов контента (следовательно, CSS), а также выглядеть и чувствовать себя (отсюда и jQuery). Они могут изменяться в разное время, когда изменяются элементы контента (на самом деле контент часто генерируется на лету) и разными людьми. Поэтому имеет смысл хранить их и в отдельных документах.

Answer 5

С использованием javascript: протокол влияет на доступность, а также влияет на SEO-дружественность вашей страницы.

Обратите внимание, что HTML означает "Гиптер-текст", что-то… Гипертекст обозначает текст со ссылками и ссылками в нем, то есть якорный элемент. <a> используется для.

Когда вы используете javascript: "протокол" вы неправильно используете элемент привязки. Так как вы злоупотребляете <a> элемент, такие как Google Bot и читатель Jaws Screen будут иметь проблемы с "пониманием" вашей страницы, так как они не очень заботятся о вашем JS, но заботятся о Hyper Text ML, обращая особое внимание на привязку hrefs,

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

Вы можете подумать: "Но у скольких людей в настоящее время отключен JavaScript?" но мне нравится формулировать эту идею более примерно так: "Сколько потенциальных клиентов я хочу отвергнуть только из-за флажка в настройках своего браузера?"

Это сводится к тому, как href является атрибутом HTML, и как таковой он принадлежит информации вашего сайта, а не его поведению. JavaScript определяет поведение, но вы никогда не хотите, чтобы он мешал данным / информации. Воплощением этой идеи будет внешний файл JavaScript; не используется onclick как атрибут, но вместо этого как обработчик события в вашем файле JavaScript.

Answer 6

Краткий ответ: встроенный JavaScript плох по тем причинам, что встроенный CSS плох.

Answer 7

Худшая проблема, вероятно, в том, что она нарушает ожидаемую функциональность.
Например, как уже отмечали другие, откройте в новом окне /tab = мертвая ссылка = раздраженные / сбитые с толку пользователи.

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

Таким образом, вы получаете то же поведение для кликов, новой вкладки / окна и даже закладок / отправленных ссылок, и вещи не выходят из строя, если JS выключен.

Другими словами, примерно так (очень упрощенно):

Для ссылки:

onclick = "doStuff()"

href = "#dostuff"

Для страницы:

onLoad = if(hash="dostuff") doStuff();

Answer 8

У меня обычно есть целевая страница с именем "EnableJavascript.htm", на которой написано большое сообщение: "Для работы этой функции должен быть включен Javascript". И тогда я настраиваю свои теги привязки как это...

<a href="EnableJavascript.htm" onclick="funcName(); return false;">

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

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

Answer 9

Кроме того, пока мы говорим об устаревании и семантике, вероятно, стоит отметить, что</a>"не означает" кликабельный "- это означает" якорь "и подразумевает ссылку на другую страницу. Поэтому имеет смысл использовать этот тег для переключения на другое "представление" в вашем приложении, но не для выполнения вычислений. Тот факт, что у вас нет URL-адреса в атрибуте href, должен свидетельствовать о том, что вам не следует использовать тег привязки.

Вы можете, поочередно, назначить действие события click почти любому элементу HTML - возможно, <h1>, <img>или <p> будет более уместным? В любом случае, как уже упоминали другие люди, добавьте еще один атрибут (возможно, "id"), который javascript может использовать в качестве "крючка" (document.getElementById), чтобы получить элемент и назначить щелчок мышью. Таким образом вы можете разделить представление контента (HTML) (CSS) и интерактивность (JavaScript). И мир не закончится.

Answer 10

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

Со всем происходящим спамом люди становятся умнее, и когда электронное письмо выглядит "фишным", все больше и больше людей заглядывают в строку состояния, чтобы увидеть, куда на самом деле приведет их ссылка.

Не забудьте добавить "вернуть ложь"; до конца вашей ссылки, чтобы страница не переходила наверх пользователя (если это не то поведение, которое вы ищете).