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

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

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

Информацию о том какие браузеры актуальны, обычно, узнают из аналитики, например google analytics, которая в режиме реального времени собирает её со всех, кто заходит на сайт.

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

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

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;
    }
  });
}

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

Чтобы узнать поддержку определенных фич в разных браузерах, можно воспользоваться прекрасным ресурсом https://caniuse.com/. А самый простой способ добавить полифиллы на свой сайт — это воспользоваться проектом polyfill.io. Кроме этого проекта, на гитхабе огромное количество готовых полифиллов для любых частей DOM. Они разбросаны по разным репозиториям разных людей, поэтому если вам понадобится что-то полифиллить, то сначала придется потратить время на поиск нужной библиотеки.

Can I Use

Иногда бывает нужно просто проверить наличие определенной фичи, и в зависимости от результата выполнять разный код. В такой ситуации поможет библиотека 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.

Она устанавливается, как зависимость проекта и один раз подключается на самом верхнем уровне приложения и делает сама всю работу, без необходимости сборки приложения вебпаком.

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

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


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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
29 сентября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»