Какой лучший способ визуализации динамической строки HTML?

Question

Предположим, у меня есть файл шаблона HTML, содержащий такую ​​строку:

<p> >>LEFT PART<< {{Data}} >>RIGHT PART<< </p>

Предположим, что левая и правая части этой строки не содержат ничего подобного {{Data}}, и я хочу реализовать функцию, которая принимаетэтот файл и объект похож на {Data:"My nice data",Name:"Sebastian"} и возвращает файл, содержащий взамен

<p> >>LEFT PART<< My nice data >>RIGHT PART<< </p>

. Это легко сделать с помощью string.prototype.replace. Но теперь у меня есть пара вопросов:

1. Как движки шаблонов JS выполняют подобные задачи? Чтобы сделать мой вопрос конкретным и конкретным, скажем, я говорю о Jade, но вы можете описать другой движок / фреймворк, такой как Pug, Dot и т. Д. Используют ли они регулярные выражения или некоторые хитрые алгоритмы поиска подстроки?
2. Потеряю ли я ощутимую скорость выполнения, если использую регулярные выражения, а левая и правая части строки содержат ~ 10000 букв? Или HTML-файл содержит более 100 строк кода.

PS Я гуглил эти вопросы, но большинство ответов описывают, как визуализировать страницу с помощью фреймворка / движка, а не как они это делают.

Answer 1

Чтобы ответить на два ваших вопроса, по порядку:

1. Более простые библиотеки шаблонов JS, как правило, ищут открытый символ (ы), используя базовый вызов JS String # indexO, так же, каквы ожидаете. Но другие - особенно те, которые не создают свои собственные шаблоны с нуля - часто полагаются на более сложные методы.

   Vue, в качестве контрпримера, использует lodash.template в своем шаблонизаторе,который сильно зависит от регулярных выражений под капотом .

2. Вы не хотите делать это с регулярным выражением, потому что регулярные выражения начинают обходить свой конечный автомат каждый раз, когда начинают совпадение;это много дополнительных затрат на обработку достаточно больших строк, что не требуется в методе «indexOf» в # 1. (Для небольших шаблонов или достаточно мощных машин это не большая разница во времени; но стоит обратить внимание на большую или массово параллельную работу!)

Финалпредостережение: многие современные движки JS-шаблонов (включая Vue) преобразуют шаблон в набор более мелких строк перед началом замены строки шаблона;это позволяет им извлечь выгоду из улучшенного времени выполнения (и распараллеливания) обработки более коротких строк.