Что такое ненавязчивый JavaScript и почему это важно?

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

Это отделение поведения от разметки или структуры. Подобно тому, как гуру CSS учат нас, что должно быть отделение отображения и разметки, должно быть и разделение поведения от разметки. Таким образом, HTML нужен для контента и структуры документа, CSS - для отображения и красоты, а ненавязчивый JavaScript - для поведения и интерактивности. Все просто!

Что?

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

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

Как?

Давайте посмотрим, простенькие, но зато показательные примеры. Пусть вам требуется открыть всплывающее окно, для внешней ссылки на вашем сайте.

Прямой путь решения этой задачи (самый навязчивый)

Первый путь - прямой; Этот метод всегда создает отрицательную репутацию JavaScript. Метод заключается в неправильном использовании атрибута href в ссылках на вашем сайте.

Последний код вызовет большие проблемы в случае недоступности JavaScript. Ссылка не будет работать! Данная методика крайне неремонтно пригодна. Так как если вы захотите изменить технику перехода по ссылкам, то вам потребуется изменить каждую внешнюю ссылку.

Менее навязчивый способ

Менее навязчивый способ заключается в добавлении JavaScript в обработчик события onclick для каждой внешней ссылки.

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

Ненавязчивый способ

А сейчас лучший путь - ненавязчивый. Добавим атрибут class ко всем ссылкам, которые требуется открыть в новом окне. Это похоже на то, как мы добавляем этот атрибут, чтобы наложить слили на подобные элементы. Однако в этом случае мы добавляем класс, чтобы добавить поведение подобным элементам. Предположим, что мы добавим класс new_window к нашим ссылкам.

Теперь мы имеем две ссылки с классом new_window, но без JavaScript. В качестве бонуса можно наложить стили на эти ссылки, чтобы они выглядели по-другому, но это не то, что мы хотели сделать, нам требуется добавить поведение.

Давайте создадим отдельный JavaScript файл, скажем app.js. Давайте воспользуемся JavaScript, чтобы получить все элементы с классом new_window. Это можно сделать примерно так:

Теперь в нашем распоряжении есть переменная anchors, содержащая все ссылки в документе с классом new_window. Теперь можно в цикле пройтись по всем этим ссылкам и добавить функцию к атрибуту onclick.

Можно также добавить немного кода, чтобы открыть ссылку в новом окне.

Мы используем this.href вместо того, чтобы вводить строку адреса URL, потому что теперь одинаковый код используется на всем множестве выбранных ссылок. Когда мы навешиваем событие onclick, в качестве this мы имеем объект, с которым мы работаем. В обработчике onclick, this - представляет ссылку, чья функция onclick обрабатывается. Таким образом, this.href - это href нажатой ссылки.

Зачем?

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

Когда пользователь заходит на ваш сайт, вы не можете гарантировать устройство, браузер или соединение, которыми он пользуется на вашем сайте. Например, некоторые старые браузеры могут быть не в состоянии выполнить код, приведенный выше, так как они не поддерживают метод getElementsByClassName. В этом случае скрипт не будет выполнен. Тем не менее, они смогут использовать сайт и проходить по ссылкам. Идеально, чтобы быть ненавязчивым, следует написать немного больше кода, чтобы JavaSсript работал и в старых браузерах, как альтернаива, можно использовать что-нибудь похожее на jQuery.

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

В завершение, есть случаи когда ридеры для слабовидящих пользователей отключают или не полностью реализуют JavaScript. Таким образом важно сделать ваш контент доступным. Так же доступный сайт - сайт оптимизированный под поисковые системы. Имея правильно работающие ссылки, поисковые роботы смогут качественно проиндексировать ваш сайт.

Заключение

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

Комментарии (2)
  • mnb Четверг 24 Март 2016
    спасибо
  • lol Пятница 31 Март 2017
    alert("test..");
Добавить комментарий
Вам необходимо включить показ изображений в браузере для того чтобы увидеть код

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru