Кодирование для SEO: использование JavaScript для отслеживания COVID-19


Объяснение асинхронного JavaScript с использованием Fetch API для вывода данных JSON на экран.

Наряду с повышением рейтинга поиска вы можете столкнуться с предупреждением Google Search Console о Задержка первого входа. После профилирования производительности страницы с помощью Dev Tools (вкладка производительности, диаграмма ЦП), вы можете обнаружить, что JavaScript занимает много времени в основном потоке ЦП. Этот JavaScript, вероятно, содержит широко поддерживаемый, но устаревший, XML HTTP-запрос (XHR) для сетевого ресурса.

Современный JavaScript не должен блокировать основной поток ЦП, как это делает XHR. Новые шаблоны также упрощают запрос данных JSON и управление ими. Давайте посмотрим, как это можно сделать с помощью простого скрипта, который извлекает статистику COVID-19 для отображения в вашем браузере.

Скопируйте приведенный выше исходный код и вставьте его в текстовый редактор. Сохраните его как локальный файл на рабочем столе (или в другом месте, которое вы вспомните). Обязательно дайте ему .html расширение, чтобы его можно было легко открыть с помощью веб-браузера. Дважды щелкните новый файл или перейдите к нему с помощью браузера [File]→[Open File] пункт меню.

Если вы подключены к Интернету, на странице должна отображаться статистика. Наш скрипт извлекает данные JSON из источника, управляемого несколькими журналистами, и распаковывает их, чтобы обновить DOM вашей страницы. Обновляйте страницу или посещайте ее периодически, чтобы отслеживать последнюю статистику.

Назначение функций как значений

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

const getCovidStats = async() => {

Значение присваивания – это все, что находится между первым знаком равенства после «getCovidStats» и точкой с запятой в строке 28: async() => { ...};

Точка с запятой здесь завершает присвоение значения.

Поскольку код объявляет асинхронный () функция, когда мы ссылаемся на getCovidStats, нам нужно будет сделать это в форма для вызова функций чтобы он работал. Нам нужно использовать круглые скобки, как вы их видите в строке 29: getCovidStats();

Обратите внимание, как мы назвали getCovidStats() после чего функция делает? Рекомендуется называть функции после их основного действия – обозначения того, что делают наши функции – в качестве общего соглашения об именах. Это упрощает будущим программистам возможность следовать нашему коду. Это также облегчает вам выполнение собственного кода, если вы вернетесь к нему через несколько месяцев или лет.

Замечание о константах

В const ключевое слово – это сокращение от «константы», которое является общим понятием программирования для значения, которое не должно изменяться. В таком случае, getCovidStats является константой.

Константы JavaScript нельзя переназначить или повторно объявить без ошибок. JavaScript предоставляет нам сообщения об ошибках в качестве ограждения, чтобы избежать ошибок в коде. Условие заставляет нас правильно использовать наши константы.

Когда вы пишете постоянные значения, вы «жестко кодируете» значения для имен переменных, как будто высекаете их в камне. Мы часто пишем функции как постоянные переменные, потому что не хотим, чтобы наши функции вели себя непредсказуемо.

Функция async ()

Не переживайте => стрелка – тело нашего async() Функция ограничена набором фигурных скобок: {}, открытие в строке 9 и закрытие в строке 28. Обратите внимание на вложенные try {}, catch {}, а также finally {} методы, которые также определены с использованием фигурных скобок в качестве границ. Код внутри фигурных скобок – это то, что будет запускаться при вызове этих функций или методов.

Они называются здесь последовательно.

Ждите

Наша функция async () вводит специальное новое ключевое слово, используемое в блоке try: Ждите. Когда мы используем async() { await { code } } это означает, что обещание JavaScript в конечном итоге вернется в какой-то момент в будущем. С использованием await не будет блокировать обработку других задач. Другой код может выполняться, пока мы «ждем» возврата Promise.

Получить API

Мы используем fetch() который возвращает объект Promise для URL-адреса, который мы обозначили как обязательный аргумент. Сетевые методы, такие как fetch() с Promises – хорошие варианты использования, потому что сетевое подключение совершенно непредсказуемо. Мы не хотим, чтобы наша программа перестала ждать немедленного ответа. Мы хотим двигаться дальше и рассчитываем на то, что Promise вернется в конце.

Примечание о поддержке браузером

API Fetch и async() функции с await – это современные шаблоны JavaScript, которые не всегда поддерживаются старыми браузерами, особенно браузерами IE, отличными от Edge. Обратите внимание на предупреждение о написании кода для вашего целевого рынка.

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

Наш источник данных о covid-19

Источник, который мы используем, поддерживается несколькими журналистами, работающими в крупных новостных организациях. Он предлагает нам ответы в формате JSON на простые запросы GET. Это идеально для наших целей.

Существуют разрозненные источники данных, поддерживающие международные сайты, которые производят потрясающие визуализации вспышки. Глядя на то, что они используют для данных, и пытаясь найти открытый API, можно получить PDF (Ситуационные отчеты ВОЗ) или CSV (Джон Хопкинс), но для простоты здесь нам нужен JSON.