Эффективная замена строки Javascript

Question

Привет, у меня есть блок HTML, который я собираюсь использовать неоднократно (в разное время во время посещения пользователей, а не сразу). Я думаю, что лучший способ сделать это - создать HTML-div, скрыть его, а при необходимости взять его innerHTML и выполнить replace () для нескольких ключевых слов. В качестве примера HTML-блок ...

<div id='sample'>
  <h4>%TITLE%</h4>
  <p>Text text %KEYWORD% text</p>
  <p>%CONTENT%</p>
  <img src="images/%ID%/1.jpg" />
</div>

Будет ли лучший способ заменить эти ключевые слова динамическими данными?

template = document.getElementById('sample');
template = template.replace(/%TITLE%/, some_var_with_title);
template = template.replace(/%KEYWORD%/, some_var_with_keyword);
template = template.replace(/%CONTENT%/, some_var_with_content);
template = template.replace(/%ID%/, some_var_with_id);

Такое ощущение, что я выбрал глупый способ сделать это. У кого-нибудь есть какие-либо предложения о том, как сделать это быстрее, умнее или лучше? Этот код будет выполняться довольно часто во время посещения пользователя, иногда так часто, как раз в 3-4 секунды.

Заранее спасибо.

Answer 1

Усы отлично подходят для действительно элегантных шаблонов:

<div id='sample'>
  <h4>{{TITLE}}</h4>
  <p>Text text {{KEYWORD}} text</p>
  <p>{{CONTENT}}</p>
  <img src="images/{{ID}}/1.jpg" />
</div>

Затем вы можете использовать шаблон примерно так:

var template = document.getElementById(templateid).innerHTML;
var newHtml = Mustache.render(template, {
    TITLE: some_var_with_title,
    KEYWORD: some_var_with_keyword,
    CONTENT: some_var_with_content,
    ID: some_var_with_id
});
document.getElementById('sample').innerHTML = newHtml;

Это особенно хорошо работает, если вы получаете JSON от вызова Ajax - вы можете просто передать его прямо в вызов Mustache.render().

Небольшие изменения позволяют запускать один и тот же шаблон на каждом браузере или сервере. Подробнее см. https://github.com/janl/mustache.js.