Emmet в браузере с использованием ES6 Interpolation — Justin Mathews — Medium

Emmet мощный и выразительный инструмент для веб-разработчиков для сокращения HTML, SVG, XSL и других подобных языков разметки. В нем много фрагментов, которые абстрагируют CSS . В настоящее время Emmet в основном используется в среде IDE (Integrated Development Environment) для ускорения разметки HTML-кода с использованием синтаксиса CSS-селекторов . В наши дни большинство IDE поставляются с плагином Emmet который динамически расширяет аббревиатуры Emmet по мере ввода и заменяет их соответствующим HTML / CSS. Emmet также работает на стороне сервера, используя библиотеку NodeJS а также на стороне клиента, используя клиентскую библиотеку JavaScript. Это открывает захватывающие возможности для снижения объемов передачи данных на сервер и, таким образом, повышает производительность веб-приложений. Например, рассмотрим этот сценарий. Сервер отправляет в браузер клиента следующий фрагмент Emmet :

  ul.nav.nav-tabs> li * 4> a [href=”#step-$”] {Шаг $}  

В браузере Emmet expand-abbreviation Функция библиотеки JS расширяет его до:

  
 
 
  Шаг 1  
 
 
  Этап 2  
 
 
  Шаг 3  
 
 
  Шаг 4  
 
 
  

Прохладный, не так ли? Это потрясающее 75% -ное сокращение размера передачи данных! Это может значительно улучшить производительность вашего веб-приложения — особенно если ваше приложение часто запрашивает и получает HTML / CSS с сервера.

Тогда почему многие разработчики используют Emmet для отправки сокращенного HTML в браузер? Во-первых, по мере того, как ваш HTML растет, аббревиатура Emmet может стать очень длинной и трудной для чтения и поддержки. Поскольку спецификация Emmet настаивает на том, что вся аббревиатура должна быть на одной строке без разрывов строк, представление даже небольшого фрагмента HTML может быть очень длинным и громоздким. Emmet . Итак, как мы справляемся с этой проблемой? Один из подходов — отправить несколько небольших фрагментов Emmet в браузер и собрать фрагменты в браузере, используя JS в одном аббревиатуре Emmet . Здесь ES6 String Interpolation приходит на помощь.

Напомним, ES6 String Interpolation позволяет вставлять переменные и выражения внутри строк. Компилятор JavaScript оценивает переменные и выражения внутри строки и заменяет их соответствующими значениями. Например, фрагмент ниже

  let a = 'world'; 
 let b = `Hello $ {a}!`; 
 console.log (b);  

оценивает переменную b как «Привет мир!» и печатает ее в консоли. Обратите внимание на обратные кавычки (`), используемые для того, чтобы заключить строку, которая требует интерполяции вместо обычной одиночной кавычки (') или двойной кавычки ("), используемой для вложения строк в JS.

Далее посмотрим, как мы может использовать функцию ES6 String Interpolation для генерации аббревиатуры Emmet для следующего фрагмента HTML для гипотетического мастера регистрации:

  
 
 
 
 
 
 
 
 
 
 
 
 
 
  Это этап 1  
 
 
 
 
  Это этап 2  
 
 
 
 
  Это этап 3  
 
 
 
 
  Это этап 4  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
 
 
  

Мы примем подход «снизу вверх», который лучше подходит для нашей ситуации. Разрыв вышеупомянутого фрагмента на три внутренних компонента — верхняя навигация

содержимое вкладки
и внизу навигация