Как я могу обнаружить / сделать запасной вариант, если браузер не имеет синтаксиса распространения (поддержка нотации в функциях)?

Question

Для тех, кто не знает, расширенный синтаксис - это удобный способ передать неопределенное количество параметров в функцию, аналогично этому примеру:

  function debug (mode, string, ...params) {
    if (debug_enabled && window.console) {
      console.log(mode+": "+string+"(",...params,");");
    }
  }

К сожалению, эта функция не поддерживается в Internet Explorer и более старых версиях других браузеров. Более подробную информацию о синтаксисе распространения и поддержке браузера можно найти здесь.

Я не использую синтаксис распространения для чего-либо критического, однако его присутствие на сайте приводит к полному отказу JavaScript в этих старых браузерах.

Один из вариантов заключается в том, что я могу иметь отдельную версию скрипта для старых браузеров, а затем на основе пользовательского агента пропустить этот скрипт. Однако я хотел бы избежать этого, так как неудобно поддерживать оба файла и как общая стратегия это может стать экспоненциально более сложным, если сделать это с другими функциями. Также существует риск ошибочной классификации браузера пользователя.

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

Я надеялся, что кто-то может иметь или знать умный способ обнаружить поддержку синтаксиса распространения и исключить части сценария, если синтаксис распространения не поддерживается браузером пользователя. Таким образом, я могу дать пользователям старых браузеров опыт, который по-прежнему функционален и пропускает лишь несколько функций. Я искал в Интернете и не смог найти код, который делает это. Я думаю, что это может быть невозможно из-за того, что это модификация синтаксиса ядра, однако я не могу найти ничего, что могло бы полностью подтвердить это.

Answer 1

Проверяя, поддерживает ли браузер распространение, а затем загружая соответствующий скрипт, возможно , есть гораздо более простой вариант: интегрировать инструмент, такой как Babel, в процесс сборки, чтобы автоматически переносить код в синтаксисе ES6 + доES5 автоматически.Например, если вы подключите следующее в Babel :

function debug (mode, string, ...params) {
  if (debug_enabled && window.console) {
    console.log(mode+": "+string+"(",...params,");");
  }
}

Вы получите

"use strict";

function debug(mode, string) {
  if (debug_enabled && window.console) {
    var _console;

    for (var _len = arguments.length, params = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      params[_key - 2] = arguments[_key];
    }

    (_console = console).log.apply(_console, [mode + ": " + string + "("].concat(params, [");"]));
  }
}

Вы можете попробовать демо здесь .

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

Babel не ограничивается толькоРазумеется, синтаксис с изменяющимся распространением - он может переносить весь современный синтаксис вплоть до ES5 (например, деструктуризация, распространение объекта, возведение в степень (**) и многие другие).

Это сказалоОбратите внимание, что использование синтаксиса отличается от новых встроенных функций .Например, Array.prototype.includes - это функция ES6, но поскольку это новая функция, а не новый синтаксис, она не будет передаваться - чтобы старые браузеры также могли понимать новые функции, используйте полифилы, например, полифилл.io .