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. Делается это с помощью полифиллов.
Общий принцип работы этих библиотек следующий:
Важно, чтобы библиотека с полифиллами грузилась до выполнения любого другого кода. Только в этом случае остальной код может рассчитывать на наличие нужных свойств.
Ниже пример полифилла для метода 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
}
});
Но полифиллы бывают не только для DOM. Сам JavaScript тоже непрерывно развивается, особенно последние годы. Многие фичи современного JavaScript настолько упрощают разработку, что без них уже сложно. Поэтому практически ни один современный проект не обходится без библиотеки core-js. Эта библиотека закрывает почти все возможности современного JavaScript.
Она устанавливается, как зависимость проекта и один раз подключается на самом верхнем уровне приложения и делает сама всю работу, без необходимости сборки приложения вебпаком.
import 'core-js/stable';
// другие зависимости
Далее в курсе будут упражнения, где в index.js вы увидите подключение этой библиотеки.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт