Почему это плохая практика для использования ссылок с JavaScript: “протокол”?
В 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 свойство?
9 ответов
Контекст выполнения отличается, чтобы увидеть это, попробуйте воспользоваться этими ссылками:
<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->
javascript: выполняется в глобальном контексте, а не как метод элемента, что обычно вам и нужно. В большинстве случаев вы делаете что-то с элементом или по отношению к элементу, на который вы воздействовали, лучше выполнять его в этом контексте.
Кроме того, так намного чище, хотя я бы вообще не стал использовать in-line script. Посмотрите на любой фреймворк, который обрабатывает такие вещи гораздо более чистым способом. Пример в jQuery:
$('a').click(function() { alert(this.tagName); });
На самом деле оба метода считаются устаревшими. Вместо этого разработчикам рекомендуется разделять весь JavaScript во внешнем файле JS, чтобы отделить логику и код от подлинной разметки
- http://www.alistapart.com/articles/behavioralseparation
- http: //en.wikipedia. org / wiki / Unobtrusive_JavaScript
Причина этого в том, что он создает код, который легче поддерживать и отлаживать, а также способствует продвижению веб-стандартов и доступности. Подумайте об этом так: глядя на свой пример, что, если бы у вас были сотни таких ссылок на странице и вам нужно было бы изменить поведение alert для какой-либо другой функции с использованием внешних ссылок JS, вы бы только необходимо изменить привязку одного события в одном файле JS, а не копировать и вставлять кучу кода снова и снова или выполнять поиск и замену.
Я думаю, это связано с тем, что пользователь видит в строке состояния. Обычно приложения должны быть созданы для аварийного переключения на случай, если javascript не включен, однако это не всегда так.
Из-за спама люди становятся умнее, а когда электронное письмо выглядит «фишинговым», все больше и больше людей смотрят на строку состояния, чтобы увидеть, куда их на самом деле приведет ссылка.
Не забудьте добавить return false; до конца вашей ссылки, чтобы страница не перескакивала вверх для пользователя (если это не то поведение, которое вы ищете).
Пара причин:
Плохая кодовая практика:
Тег HREF указывает на наличие гиперссылки на другое место. Использование одного и того же тега для функции javascript, которая на самом деле никуда не ведет пользователя, является плохой практикой программирования.Проблемы с поисковой оптимизацией:
Я думаю, что поисковые роботы используют тег HREF для сканирования всего веб-сайта и связывания всех связанных частей. Добавляя javascript, мы нарушаем эту функциональность.Нарушает доступность:
Я думаю, что некоторые программы чтения с экрана не смогут выполнять javascript и могут не знать, как работать с javascript, ожидая гиперссылки. Пользователь ожидает увидеть ссылку в строке состояния браузера при наведении курсора на ссылку, в то время как он увидит строку вроде: "javascript:", которая может их сбить с толку и т. Д.Вы все еще находитесь в 1990-х годах:
{{1 }} Основной совет - иметь свой javascript в отдельном файле и не смешивать с HTML страницы, как это было в 1990-х годах.
HTH.
Я открываю множество ссылок в новых вкладках - только для того, чтобы увидеть javascript:void(). Таким образом, вы раздражаете не только меня, но и себя (потому что Google увидит то же самое).
Другая причина (также упомянутая другими) заключается в том, что разные языки должны быть разделены в разные документы. Почему? Ну,
- Смешанные языки не очень хорошо поддерживаются большинством IDE и валидаторов. Встраивание CSS и JS в HTML-страницы (или что-либо еще, если на то пошло) практически полностью уничтожает возможность чтобы встроенный язык проверялся на корректность статически. Иногда и встроенный язык тоже. (Документ PHP или ASP не является корректным HTML). Вы не хотите, чтобы синтаксические ошибки или несоответствия проявляются только во время выполнения.
- Еще одна причина - более четкое разделение между типами вещей, которые необходимо указывать: HTML для содержимого, CSS для верстка, JS обычно для большей верстки и внешнего вида. Они не отображаются один к одному: обычно вы хотите применить верстку к целым категориям элементов контента (отсюда CSS), а также внешний вид и функциональность. (отсюда jQuery). Они могут быть изменены в разное время, когда изменяются элементы контента (на самом деле контент часто генерируется на лету) и разными людьми. разными людьми. Поэтому имеет смысл хранить их в отдельных документах.
Обычно у меня есть целевая страница с названием «EnableJavascript.htm», на которой есть большое сообщение о том, что «для работы этой функции необходимо включить Javascript». А затем я настраиваю свои теги привязки вот так ...
<a href="EnableJavascript.htm" onclick="funcName(); return false;">
Таким образом, привязка имеет законное место назначения, которое по возможности будет перезаписано вашей функциональностью Javascript. Это будет изящно ухудшаться. Хотя в настоящее время я обычно создаю веб-сайты с полной функциональностью, прежде чем я решу добавить немного Javascript в смесь (что в совокупности устраняет необходимость в подобных привязках).
Использование атрибута onclick непосредственно в разметке - это совсем другая тема, но я бы порекомендовал ненавязчивый подход с такой библиотекой, как jQuery.
Использование протокола javascript: влияет на доступность, а также вредит SEO-дружественности вашей страницы.
Обратите внимание, что HTML означает Hypter Text something something ... Hyper Text обозначает текст со ссылками и ссылками в нем, для чего используется элемент привязки .
Когда вы используете «протокол» javascript: , вы неправильно используете элемент привязки. Поскольку вы неправильно используете элемент , такие вещи, как Google Bot и программа чтения с экрана Jaws, будут иметь проблемы с «пониманием» вашей страницы, поскольку они не очень заботятся о вашем JS, но очень заботятся о Hyper Text ML, особо отметив привязку hrefs .
Это также влияет на удобство использования вашей страницы, когда пользователь, у которого не включен JavaScript, посещает вашу страницу; вы нарушаете ожидаемую функциональность и поведение ссылок для этих пользователей. Он будет выглядеть как ссылка, но не будет действовать как ссылка, поскольку использует протокол javascript .
Вы можете подумать: «Но у скольких людей сейчас отключен JavaScript?» но мне нравится формулировать эту идею в большей степени следующим образом: «Скольким потенциальным клиентам я готов отказаться только из-за флажка в настройках их браузера?»
Это сводится к тому, как href атрибут HTML, и как таковой он принадлежит информации вашего сайта, а не его поведению. JavaScript определяет поведение, но вы никогда не хотите, чтобы он мешал данным / информации. Воплощением этой идеи мог бы быть внешний файл JavaScript; не использовать onclick в качестве атрибута, а вместо этого использовать в качестве обработчика событий в вашем файле JavaScript.
Краткий ответ: встроенный Javascript плох по той причине, что встроенный CSS плох.
Кроме того, поскольку мы говорим об устаревании и семантике, вероятно, стоит отметить, что ' ' не означает «кликабельно» - это означает «привязка» и подразумевает ссылку на другую страницу. Поэтому имеет смысл использовать этот тег для переключения на другое «представление» в вашем приложении, но не для выполнения вычислений. Тот факт, что у вас нет URL-адреса в вашем атрибуте href, должен быть признаком того, что вы не должны использовать тег привязки.
Вы также можете назначить действие события щелчка практически любому элементу html - возможно, ,
или
было бы более подходящим? В любом случае, как уже упоминали другие люди, добавьте еще один атрибут (возможно, «id»), который javascript может использовать в качестве «крючка» (document.getElementById), чтобы добраться до элемента и назначить onclick. Таким образом, вы можете разделить представление контента (HTML) (CSS) и интерактивность (JavaScript). И миру не конец.