Один из способов улучшить пользовательский опыт вашего сайта — позволить вашим посетителям персонализировать некоторые его аспекты. Это может быть что угодно, от увеличения размера шрифта до выбора соответствующего языка или локали. Как разработчик, задача в реализации этого двояка. Вы должны разрешить пользователю создавать персонализации в первую очередь, а также помнить их при следующем посещении. Из этого туториала вы узнаете, как создать переключатель стиля и использовать локальное хранилище для запоминания предпочтений вашего пользователя.
Основы
Первое, что нам нужно, это базовая HTML-страница с небольшим содержанием и стилем. Я также добавлю элемент select, который позволит посетителю переключаться между стилями. Пример того, как эта страница может выглядеть, показан ниже.
Реагируя на события
Так как выпадающее меню используется для переключения между стилями, нам нужно прикрепить прослушиватель событий к элементу select который реагирует соответствующим образом каждый раз, когда пользователь выбирает новый стиль.
Согласно модели событий W3C DOM уровня 2 , стандартный способ регистрации обработчиков событий выглядит следующим образом:
element.addEventListener(<event-name>, <callback>, <use-capture>);
Значение каждого аргумента:
-
event-name— Строка, представляющая имя или тип события, которое вы хотели бы прослушать. -
callback— функция, которая вызывается всякий раз, когда происходит событие. -
use-capture— логическое значение, указывающее, должен ли вызываться обратный вызов на этапе захвата. Это когда событие переходит от корня документа к цели.
К сожалению, IE8 и его предшественники не придерживаются этой модели. Вместо этого они предоставляют альтернативный attachEvent() для той же цели. Независимо от того, решите ли вы поддерживать эти старые версии IE или нет, зависит от ваших показателей посещаемости. Вы должны сравнить стоимость поддержки старых браузеров с преимуществами, которые это принесет. В данном конкретном случае речь идет об использовании простого полифилла, поэтому поддержка IE8 не имеет большого значения. В следующем примере кода показано, как обрабатывается событие change элемента select во всех браузерах.
В функции switchStyles() важно отметить, что this относится к элементу, который вызвал событие (в данном случае элемент select ). Следовательно, this.options даст нам доступ к элементам option элемента select , а this.options[this.selectedIndex] даст нам доступ к this.options[this.selectedIndex] select элементу. Оттуда просто получить доступ к атрибуту value option .
Также обратите внимание, что код использует console.log() вместо alert() . Это сделано потому, что alert() блокирует пользовательский интерфейс, и его необходимо закрыть, чтобы возобновить выполнение JavaScript. В этом примере это не так уж плохо, но в более сложных случаях (например, при проверке элементов массива большого размера) этот подход может быть очень уродливым. Если вы не знаете, как открыть консоль браузера, вы можете узнать здесь . Если вы хотите узнать немного больше об использовании консоли для отладки JavaScript, вы можете сделать это здесь .
Смена стилей
Теперь пришло время добавить несколько простых стилей на нашу страницу, которые пользователь сможет выбирать. Добавьте следующий CSS-код в ваш проект:
/* High contrast */ body.high-contrast{ background-color: DarkBlue; color: yellow } body.high-contrast h1{ text-shadow: none; } /* Print */ body.print h1{ text-shadow: none; } body.print img{ display: none; }
Когда пользователь выбирает другой стиль из выпадающего списка, мы собираемся применить соответствующий класс непосредственно к телу, удалив все остальные классы:
function switchStyles() { var selectedOption = this.options[this.selectedIndex], className = selectedOption.value; document.body.className = className; }
На данный момент у нас есть полностью функциональный переключатель стиля, как показано в следующей демонстрации:
Работа на уровне листа
Замена имен классов хорошо нам подходит для этой демонстрации. Однако, если вы имеете дело с большим количеством стилей, предпочтительно поместить их во внешние таблицы стилей. Затем вы можете поменять таблицы стилей вместо отдельных классов. Следующий код, который предполагает одну таблицу стилей на страницу, показывает, как это делается.
function switchStyles() { var linkTag = document.getElementsByTagName('link')[0], currentStylesheet = linkTag.href.replace(/^.*[\\\/]/, ''), newStylesheet = this.options[this.selectedIndex].value + '.css'; linkTag.href = linkTag.href.replace(currentStylesheet, newStylesheet); }
Запоминание пользовательских настроек
На данный момент у нас есть функциональный переключатель стиля. К сожалению, при перезагрузке страницы все измененные стили будут потеряны. Чтобы обойти эту проблему, мы будем использовать хранилище на стороне клиента, чтобы сохранить предпочтения пользователя. Затем мы можем восстановить эти настройки при каждой загрузке страницы.
Существует множество технологий хранения на стороне клиента, доступных для выбора. Вы можете найти хороший обзор их в статье « Хранение в браузере HTML5: прошлое, настоящее и будущее» . В этом примере мы будем использовать локальное хранилище . Локальное хранилище имеет широкую поддержку браузера и обеспечивает до 5 МБ постоянного хранилища. И, в отличие от файлов cookie, информация, хранящаяся в локальном хранилище, никогда не передается на сервер. Если вам нужна поддержка древних браузеров (бедняжка), есть полифилы, которые сделают вашу жизнь проще. Также обратите внимание, что некоторые браузеры, такие как IE8, не поддерживают локальное хранилище с протоколом file:// .
Основной синтаксис локального хранилища показан ниже.
// is localStorage available? if (typeof window.localStorage != 'undefined') { // store localStorage.setItem('hello', 'Hello World!'); // retrieve console.log(localStorage.getItem('hello')); // delete localStorage.removeItem('hello'); }
Чтобы реализовать это на нашей странице, нам нужно сохранять предпочтительные стили пользователя каждый раз, когда изменяется значение элемента select :
localStorage.setItem('bodyClassName', className);
Нам также нужно будет проверить наличие этой пары ключ-значение при загрузке страницы и, если мы их найдем, соответствующим образом установить имя класса тела. Мы можем сделать это, сначала попытавшись получить пару ключ-значение:
// this will be null if not present var storedClassName = localStorage.getItem('bodyClassName');
Если элемент присутствует, мы можем перебрать опции элемента select и сравнить их значение с тем, что мы получили из локального хранилища. Если они совпадают, тогда мы можем установить свойство index выбранного элемента select соответствующим образом:
if (storedClassName) { for(var i = 0; i < styleSwitcher.options.length; i++){ if (styleSwitcher.options[i].value === storedClassName){ styleSwitcher.selectedIndex = i; } } }
Следующая демонстрация включает эти изменения.
Теперь мы можем изменить стили через выпадающее меню. Кроме того, когда мы обновляем страницу, раскрывающееся меню возвращается к предыдущему выбору. Однако при перезагрузке стили не меняются в соответствии с выпадающим списком. Что дает?
Что ж, когда мы изменяем элемент select программно, прикрепленный к нему обработчик событий не выполняется. Давайте исправим это с помощью нашей собственной триггерной функции:
function trigger(action, el) { if (document.createEvent) { var event = document.createEvent('HTMLEvents'); event.initEvent(action, true, false); el.dispatchEvent(event); } else { el.fireEvent('on' + action); } }
Мы можем передать этой функции действие, которое мы хотели бы вызвать, а также элемент для ее запуска. Затем функция проверяет, отвечает ли браузер на document.createEvent() (что делают все современные, совместимые со стандартами браузеры). Если это так, то он использует dispatchEvent() для запуска действия. В противном случае он возвращается к использованию fireEvent() . Подробнее о создании пользовательских событий вы можете прочитать в этой статье: Как создавать пользовательские события в JavaScript
Последний кусок головоломки — добавить следующую строку кода:
trigger('change', styleSwitcher);
После добавления этой строки окончательный код будет показан в следующей демонстрации.
Вывод
Из этого туториала вы узнаете, как разрешить пользователям настраивать части страницы. Вы также узнали, как запоминать предпочтения ваших пользователей, чтобы повысить их общее восприятие вашего сайта. При правильном использовании, это мощная техника, которая может выделить ваш сайт из толпы. Мне было бы интересно услышать, если вы используете эту технику в комментариях, а также истории успеха (или ужасов).