Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

7 <ol><li>Проверяем наличие нужного метода или свойства</li>

8 <li>Если их нет, то добавляем</li>

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

10 <h2>Добавление метода</h2>

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

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

13 <h2>Добавление свойства</h2>

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

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

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

17 А самый простой способ добавить полифиллы на сайт - это воспользоваться проектом<a>polyfill-fastly.io</a>.

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

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

20 <h2>Ядро JavaScript</h2>

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

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

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

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