Hrefs vs JavaScript onclick (в отношении ненавязчивого JavaScript) - PullRequest
5 голосов
/ 28 октября 2010

Как лучше всего использовать ссылки / теги с явными ссылками на другие страницы вашего сайта (т.е. href = "/ blah / blah / blah.html) против использования ссылок hrefs / divs / etc.у меня нет явного href, и их onclick установлены в обработчике готовых документов с помощью JavaScript, скажем, в файле main.js.

Я не эксперт, когда дело доходит до веб-разработки, но мне нравитсяизучая jQuery и тому подобное, и обнаруживаю, что подписываюсь под понятием «Ненавязчивый JavaScript». Хотя оба приведенных выше варианта не нарушают часть «не иметь JavaScript внутри HTML» этого менталитета, я полагаю, что я одержим «разделениемструктуры и представления из поведения ". Хотя, по общему признанию, более естественно для меня поместить туда тег и явно установить href, я обнаружил, что думаю, что это действительно поведение и, следовательно, должно быть установлено в JS.

Это будет далеко, или я просто не привык к этому? Другая сторона меня видит выгоду от того, чтобы поместить это в JS, потому что теперь яиметь возможность полностью контролировать поведение этой ссылки без необходимости что-либо менять в HTML.Я полагаю, вы бы сказали, что я нахожусь на заборе.Пожалуйста, помогите получить меня вниз.=)

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

Ответы [ 5 ]

10 голосов
/ 28 октября 2010

Это действительно заходит слишком далеко по множеству причин.

  1. Это в основном хитрый код, которого следует избегать.
  2. Это не дает ощутимой пользы вашему сайту.
  3. Нет красноречивого запасного варианта для no-js.
  4. Оказывает негативное влияние на SEO. В частности, боты не будут запускать ваш скрипт, и, следовательно, не будут видеть ссылки и, в конечном счете, не будет правильно проиндексировать ваш сайт.
  5. Вероятно, наиболее важно, что этот эффект может серьезно повлиять на UX для программ чтения с экрана или пользователей с отключенным JS (например, многие браузеры мобильных телефонов отключают JS)

В конце концов, если у вас нет явной необходимости сломать шаблон (например, устаревшая поддержка), вы должны приложить все усилия, чтобы следовать ненавязчивому дизайну, и это очень навязчиво в том смысле, что вы используете JavaScript для создания статической структуры то, что гораздо лучше сделать с HTML.

6 голосов
/ 28 октября 2010

Обычные пользователи не будут знать разницу.Однако поисковые системы и методы SEO потребуют от вас использовать href = "" для ссылки на другие ваши страницы, если вы хотите, чтобы пауки следовали за ними.То же самое, если посетитель использовал программу чтения с экрана или имел какие-то особые потребности в доступности.Многие из них читают исходный код, а не DOM.

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

Если вам нужно добавить дополнительные функции или нетзатем используйте другую страницу или действие, затем используйте стиль javascript onclick или jQuery для прикрепления событий.

4 голосов
/ 28 октября 2010

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

И другие клиенты также будут затронуты.Пауки и другие боты будут читать вашу страницу для информации в ваших тегах привязки, чтобы определить, с какой страницей связана ссылка.Если вы вместо этого используете «поведение», вы удаляете эту значимую информацию со страницы.

1 голос
/ 28 октября 2010

Плагин истории jquery довольно хорош, он позволяет вам установить href = '# / url ", таким образом вы можете иметь реальные URL, реальные кнопки возврата, но ваши помощники просто слушают события, связанные с history.url.

http://tkyk.github.com/jquery-history-plugin/

Неиспользование тегов может также иметь проблемы с юзабилити для слабовидящих пользователей с программами чтения с экрана.

1 голос
/ 28 октября 2010

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

С другой стороны, если бы в существующем коде уже было 9 динамически устанавливаемых hrefs, а вы просто добавляете один статический href, я бы, вероятно, следовал примеру предыдущего разработчика по удобочитаемости.

...