От автора: моя ошибка была связана с тем, что JavaScript мешает просматривать страницы в Интернете. Простые, но стандартные вещи, такие как время до первого взаимодействия задерживались без уважительной причины, в моем случае, это были ссылки, которые не работали как ссылки.
Я тоже виноват в этом, так что этот пост — это мое признание и (в идеале) попытка помешать мне сделать это снова. Давайте разбираться, какую ошибку я допускал при работе со ссылками в JavaScript.
Click
Все начинается с небольшого свойства click, а затем все идет по нарастающей. Предположительно по уважительной причине я решил заняться нативной обработкой браузером клика посетителя на каком-либо элементе в DOM.
Возможно, мне нужно разместить запрос API в фоновом режиме, обновить какую-то часть пользовательского интерфейса или, возможно, выполнить проверку перед отправкой запроса.
Я использую Next.js для многих проектов. Мне он нравится, потому что он поставляется с поддержкой рендеринга на стороне сервера без настройки и прямо из коробки. Это хорошо.
Из-за того, как работает маршрутизация Next, довольно часто я переопределяю нативный клик браузера, чтобы можно было запускать последующую навигацию, отображаемую клиентом. Это может принести пользу от предварительного извлечения кода (для макета), а также обеспечить действительно приятное и быстрое взаимодействие с пользователем, а также сокращает время прохождения запроса туда-обратно и полезную нагрузку, которая выполняется при клике пользователя.
Я все испортил
Это мой код (React):
1 2 3 4 5 6 7 8 9 10 |
<Card onClick={event => { event.preventDefault(); Router.push( `/thing/_single?id=${id}`, // "real" url `/thing/${id}` // URL the browser shows ); }} {...props} /> |
Компонент работает по прямому назначению. Посетитель нажимает на компонент карточки и загружает новый маршрут (файл, в котором он находится ./pages/_single.js), передавая ему строку запроса id=nnn.
Этот компонент может дать сбой в двух случаях. Первый должен (я надеюсь) быть очевидным, второй не столь очевиден.
На полпути к стороне сервера
Я сталкиваюсь с подобными сайтами все чаще и чаще в последнее время. Они используют рендеринг на стороне сервера, чтобы получить выгоду в аспекте SEO и производительности, потому что страница не зависит от загрузки JavaScript. За исключением того, что когда она загружена, она зависит от JavaScript, чтобы фактически реагировать на взаимодействия — например, клик.
В моем коде выше, если подключение к Интернету прерывистое (например, мобильная связь), выбранный элемент (карточка) загружается, но нет нечего, что обрабатывало бы клик, например, элемента анкора.
Итак, теперь у меня есть простое практическое правило: если есть onClick, должен быть анкор вокруг компонента. Как насчет второго случая. Вы увидели его?
Зная лучше, чем браузер
JavaScript позволяет мне делать довольно красивые вещи. К сожалению, есть множество причудливых вещей, которые обрабатывают встроенный функционал браузера, без осмысления или защиты от случайного выбрасывая из окна.
В этом конкретном случае моему посетителю не разрешается нажимать на мой интерактивный компонент каким-либо иным способом, кроме того, который я запланировал . Что довольно самонадеянно с моей стороны.
Что происходит при клике с нажатой клавишей Shift?
Что происходит при клике с нажатой клавишей command (или control)?
Ни одно из этих двух действий не будет работать. Элемент должен открыться в новом окне и новой вкладке соответственно. Это было намерение моих посетителей, так почему я решил, что они больше не могут этого делать? Ответ прост: я не подумал об этом. Это смущало, хуже того — злило — моего посетителя. Исправление — это вопрос нескольких строк, поэтому давайте сделаем это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<a href={`/thing/${id}`}> <Card onClick={event => { if (event.ctrlKey || event.metaKey || event.shiftKey) { return; // let the browser deal with the click natively } // otherwise handle it with our fancy JavaScript event.preventDefault(); Router.push( `/thing/_single?id=${id}`, // "real" url `/thing/${id}` // URL the browser shows ); }} {...props} /> </a> |
Новые эмпирические правила
Каждый раз, когда я добавляю onClickк для компонента, я хочу убедиться, что существует реальный анкор, готовый обработать намеченное действие. Я также хочу убедиться, что обработка модификаторов в браузере работает так, как задумано. Слишком много сайтов не позволяют мне использовать модификаторы клика — я не хочу быть в их числе и злить посетителя.
Источник: //remysharp.com
Редакция: Команда webformyself.