Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Полифиллы JS: DOM API

DOM непрерывно развивается. Какие-то браузеры его адаптируют быстрее, какие-то медленнее. Все это не позволяет легко и непринужденно пользоваться последними новинками. Разработчикам каждый раз нужно думать, какие браузеры распространены у пользователей их проектов.

Как выяснить, какие браузеры актуальны? Обычно об этом узнают из аналитики. Например, можно использовать Google Analytics, которая в режиме реального времени собирает данные обо всех, кто заходит на сайт.

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

Например, есть метод matches(), который ищет элементы по CSS-селекторам. Он поддерживается Internet Explorer, но только с девятой версии. Если в вашем проекте заявлена совместимость с восьмой версией, то на вызов этого метода мы получим ошибку:

const div = document.querySelector('div');
div.matches('.someClass'); // Uncaught TypeError: matches is not a function

К счастью, JavaScript позволяет частично компенсировать недостатки старых браузеров. Благодаря прототипам разработчики могут добавить недостающую функциональность прямо в реализацию DOM. Делается это с помощью полифиллов, которые мы изучим сегодня.

Общий принцип работы этих библиотек следующий:

  1. Проверяем наличие нужного метода или свойства
  2. Если их нет, то добавляем

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

Добавление метода

Рассмотрим пример полифилла для метода node.matches(). Он работает для всех популярных браузеров и задействует их специфику, что видно по именам свойств:

(function(constructor) {
  const p = constructor.prototype;
  if (!p.matches) {
    p.matches = p.matchesSelector ||
    p.mozMatchesSelector ||
    p.msMatchesSelector ||
    p.oMatchesSelector ||
    p.webkitMatchesSelector;
  };
})(window.Element);

После выполнения этого кода мы можем использовать метод element.matches(), не боясь, что его не будет в старых браузерах.

Добавление свойства

Более сложный вариант – добавление свойства ParentNode.lastElementChild. Здесь приходится программировать логику поиска нужного элемента:

// Обратите внимание, что добавление свойства производится особым образом,
// из-за которого свойство становится динамическим и ленивым
// Другими словами, его значение будет вычисляться только в момент обращения
if (!('lastElementChild' in document.documentElement)) {
  Object.defineProperty(Element.prototype, 'lastElementChild', {
    get: function() {
      for (let nodes = this.children, n, i = nodes.length  1; i >= 0; --i) {
        if (n = nodes[i], 1 === n.nodeType) {
          return n;
        }
      }
      return null;
    }
  });
}

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

Чтобы проверить поддержку определенных фич в разных браузерах, можно воспользоваться ресурсом Can I use:

Can I Use

А самый простой способ добавить полифиллы на сайт — это воспользоваться проектом polyfill.io.

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

Иногда нам нужно просто проверить наличие определенной фичи и выполнить разный код в зависимости от результата. В такой ситуации поможет библиотека modernizr:

// Проверяется наличие flash
Modernizr.on('flash', (result) => {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

Ядро JavaScript

Полифиллы бывают не только для DOM. Сам JavaScript тоже непрерывно развивается.

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

Чтобы использовать эту библиотеку, нужно установить ее как зависимость проекта и подключить ее на самом верхнем уровне приложения. И все — дальше она делает всю работу сама, поэтому нам не приходится собирать приложения через webpack:

import 'core-js/stable';
// Другие зависимости

Далее в курсе будут упражнения, где в index.js вы увидите подключение этой библиотеки.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»