Обеспечение совместимости JavaScript с разными браузерами

Расширенные примеры обнаружения и полифилов

Ниже приведены подробные сценарии с пояснениями каждого шага и отображением результатов.

Пример 1: Полифил для Array.prototype.includes

Метод includes появился в ES2016. Старые браузеры (IE11, Safari 9) не поддерживают его. Полифил добавляет метод, если он отсутствует.

// Полифил (обычно из core-js)
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    var o = Object(this);
    var len = o.length >>> 0;
    if (len === 0) return false;
    var n = fromIndex | 0;
    var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
      if (o[k] === searchElement) return true;
      k++;
    }
    return false;
  };
}

// Использование
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

// В браузере с поддержкой – выведет true и false.
// В старом браузере после полифила – то же самое.
// Если полифил не подключить, возникнет ошибка: arr.includes is not a function.

Пример 2: Обнаружение поддержки CSS Grid и запасной макет

Современные браузеры поддерживают CSS Grid Layout. Для старых применяется feature detection в CSS через @supports или JavaScript.

// JavaScript-проверка
if (typeof CSS !== 'undefined' && CSS.supports('display', 'grid')) {
  console.log('Grid поддерживается');
} else {
  console.log('Grid не поддерживается, используйте flexbox или float');
  document.body.classList.add('no-grid');
}

// В Chrome – 'Grid поддерживается'
// В IE11 – 'Grid не поддерживается, используйте flexbox или float'

Затем в CSS пишутся правила для .no-grid:

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.no-grid .layout {
  display: flex;
}
.no-grid .layout > * {
  flex: 1;
}

Пример 3: Транспиляция с Babel и полифилами в проекте

Пошаговая настройка для сборки проекта на ES6 с поддержкой IE11.

1. Установить Babel и пресет: npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. Установить core-js для полифилов: npm install core-js@3
3. Файл конфигурации babel.config.json:
   Пример

   
   {
     "presets": [
       ["@babel/preset-env", {
         "targets": "> 0.25%, not dead",
         "useBuiltIns": "usage",
         "corejs": 3
       }]
     ]
   }
       

4. Исходный файл src/main.js:
   Пример

   
   const promises = [Promise.resolve(1), Promise.resolve(2)];
   Promise.all(promises).then(console.log);
   
   const set = new Set([1,2,3]);
   console.log(set.has(1));
       

5. Запуск транспиляции: npx babel src --out-dir dist
6. Результат в dist/main.js (упрощённо):
   Пример

   
   "use strict";
   
   require("core-js/modules/es.array.iterator.js");
   require("core-js/modules/es.promise.js");
   
   var promises = [Promise.resolve(1), Promise.resolve(2)];
   Promise.all(promises).then(console.log);
   
   var set = new Set([1,2,3]);
   console.log(set.has(1));
       

// В IE11 код выполнится без ошибок, так как полифилы подставлены автоматически.
// Если бы использовалась только транспиляция (без полифилов), Promise и Set вызвали бы ошибку.

Пример 4: Использование сервис-воркера для условной загрузки полифилов

Сервис-воркер может перехватывать запросы и подставлять полифилы при необходимости. Это улучшает производительность.

// service-worker.js
self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // Проверка по заголовку User-Agent или через предварительное обнаружение
  // (упрощённый пример)
  if (url.pathname.endsWith('app.js')) {
    // Возвращаем версию с полифилами для старых браузеров
    event.respondWith(
      fetch('/polyfilled/app.js')
    );
  }
});

// Сервис-воркер регистрируется в обычном скрипте.
// Браузеры, поддерживающие Service Worker, будут получать оптимизированную версию.
// Для неподдерживающих – обычный скрипт загружается без изменений.