Обнаружение литералов шаблона в браузере (в необычном контексте) - PullRequest
Новая
       28

Обнаружение литералов шаблона в браузере (в необычном контексте)

0 голосов
/ 09 апреля 2019

У меня есть несколько JS, использующих литералы шаблонов ES6, которые я хочу гарантировать, чтобы иметь запасной вариант для старых браузеров.

Обычно, чтобы обнаружить функцию javascript, я сделал бы стандартный оператор if, чтобы увидеть, обнаружена ли эта функция вобъект окна: 

if("JavascriptFeature" in window){
    // do something with the feature
}

Как бы я это сделал с литералами шаблона в контексте ниже?

У меня есть код ниже, который в основном используется для гарантии того, что свойство 100vh работает должным образом на мобильном устройстве / iPad, и я хочу заключить JS в условие, которое запускается, только если браузер может использовать литералы шаблона:

JS 

function resizeSection(){
    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit

    var vh = window.innerHeight * 0.01;

    // Then we set the value in the --vh custom property to the root of the document

    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

resizeSection();
addEventListener("resize", resizeSection, false)

CSS 

.heading-section {
    /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(100vh); 

    /*MODERN BROWSERS*/
    height: calc(var(--vh, 1vh) * 100);
}

Обратите внимание: это не дубликат Обнаружение литералов шаблона в javascript , который аналогичензвучащий вопрос в совершенно ином контексте.

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Проверки на наличие синтаксических функций должны выполняться в операторе eval.

Например, проверка строковых литералов будет выглядеть как 

function supportsLiterals() {
  try{ return eval("''===``") }
  catch(e){ return false; }
}

console.log(supportsLiterals());

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

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

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

Например, при использовании онлайн-версии Babel ваш код переместится на 

function resizeSection() {
  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
  var vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document

  document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
}

resizeSection();
addEventListener("resize", resizeSection, false);
0 голосов
/ 09 апреля 2019

Проверка синтаксиса происходит перед выполнением любого кода.Среда выполнения, которая не поддерживает новый синтаксис, вообще не будет запускать какой-либо сценарий;вы не можете «защитить» части скрипта после времени разбора, потому что слишком поздно.

У вас может быть тег <script> с простым литералом шаблона, который инициализирует некоторый глобальный символ, а затем отметьте отдельный <script>, присутствует ли этот глобальный символ.

Если первый <script> имеет синтаксическую ошибку (поскольку среда выполнения JavaScript устарела), он не будет запущен.Второй <script> будет знать, что литералы шаблона либо работают, либо не работают.

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

...