Полифиллы — 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. Они разбросаны по разным репозиториям разных людей, поэтому если вам понадобится что-то полифиллить, то сначала придется потратить время на поиск нужной библиотеки.

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

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

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