Полифиллы и фоллбэки

Bliss.js предоставляет удобный способ работы с DOM, обеспечивая более чистый и читаемый синтаксис для манипуляций с элементами, событиями и атрибутами. Одной из ключевых особенностей библиотеки является встроенная поддержка полифиллов и фоллбэков, позволяющая писать современный код с учётом браузеров, которые не поддерживают новые возможности JavaScript и DOM API.

Основные принципы работы полифиллов

Полифилл в Bliss.js представляет собой замену или расширение стандартного функционала браузера. Он проверяет наличие нативной реализации метода или свойства и подключает альтернативную реализацию только при необходимости. Это позволяет избежать конфликтов и ненужного дублирования кода в современных браузерах.

Пример полифилла для метода Element.prototype.matches:

Bliss.polyfill('matches', function() {
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
      Element.prototype.msMatchesSelector || 
      Element.prototype.webkitMatchesSelector || 
      function(selector) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(selector);
        var i = matches.length;
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;
      };
  }
});

Ключевые моменты:

  • Проверка нативной поддержки через if (!Element.prototype.matches).
  • Использование всех доступных префиксов для обеспечения совместимости с устаревшими браузерами.
  • Возврат функции, которая имитирует поведение метода на старых платформах.

Фоллбэки для методов Bliss.js

Фоллбэк — это механизм, позволяющий библиотеке корректно работать даже если браузер не поддерживает определённый метод. В Bliss.js фоллбэки интегрированы во внутренние методы работы с DOM, событиями и атрибутами.

Пример фоллбэка для Bliss.ajax:

Bliss.ajax = function(url, options) {
  options = options || {};
  if (window.fetch) {
    return fetch(url, options).then(function(response) {
      return response.json();
    });
  } else {
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open(options.method || 'GET', url);
      xhr.onl oad = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(xhr.statusText);
        }
      };
      xhr.oner ror = function() { reject(xhr.statusText); };
      xhr.send(options.body || null);
    });
  }
};

Особенности подхода:

  • Проверка поддержки fetch и переключение на XMLHttpRequest при её отсутствии.
  • Использование Promise для унифицированного асинхронного интерфейса.
  • Возможность обработки ошибок и статусов на старых браузерах без изменения кода, вызывающего Bliss.ajax.

Полифиллы для событий

Bliss.js упрощает работу с событиями через метод on. Для событий, которые поддерживаются не во всех браузерах, используются полифиллы.

Пример для события input в старых версиях IE:

Bliss.polyfill('inputEvent', function() {
  if (!('oninput' in document.createElement('input'))) {
    Bliss.on(document, 'propertychange', function(e) {
      if (e.propertyName === 'value') {
        var event = new Event('input', { bubbles: true });
        e.target.dispatchEvent(event);
      }
    });
  }
});

Основные аспекты:

  • Подмена отсутствующего события на поддерживаемое (propertychange).
  • Генерация нового события через dispatchEvent, чтобы сохранить единый интерфейс.
  • Поддержка всплытия события (bubbles: true) для совместимости с современными обработчиками.

Автоматическая активация полифиллов

Bliss.js предоставляет функцию Bliss.polyfillAll(), которая автоматически инициализирует все зарегистрированные полифиллы. Это позволяет разработчику использовать современные методы без необходимости вручную проверять поддержку в каждом месте кода.

Bliss.polyfillAll();

Функция выполняет следующие действия:

  • Проходит по списку всех полифиллов, зарегистрированных через Bliss.polyfill.
  • Вызывает каждый полифилл только если соответствующая функциональность отсутствует.
  • Минимизирует влияние на производительность за счёт ленивой инициализации.

Рекомендации по использованию

  1. Полифиллы и фоллбэки стоит подключать до выполнения основного кода приложения, чтобы гарантировать одинаковое поведение методов.
  2. Для больших проектов рекомендуется использовать только необходимые полифиллы, чтобы избежать увеличения размера скрипта.
  3. Bliss.js позволяет комбинировать собственные полифиллы с встроенными, что облегчает поддержку специфичных браузеров и устаревших платформ.
  4. В случае расширенных API, таких как Promise, fetch или CustomEvent, лучше создавать собственные полифиллы с учётом особенностей целевых браузеров, интегрируя их через Bliss.polyfill.

Полифиллы и фоллбэки в Bliss.js обеспечивают надёжность и предсказуемость работы кода на любых браузерах, сохраняя преимущества современного синтаксиса JavaScript и чистого DOM API. Их правильное использование позволяет минимизировать ошибки совместимости и поддерживать единый интерфейс для всех платформ.

Оглавление