Лучшая практика хранения HTML-шаблонов на странице?

Ответ 1

Почему бы просто не загружать шаблоны в скрытый элемент, а затем использовать $(template).clone()? Это экономит много беглых головных болей. Я не могу говорить о производительности на .clone() по сравнению с подходом <script>, но могу сказать, что дополнительные теги script - это штраф за производительность и просто делают код грязным.

Почему?

• Несмотря на то, что у вас есть утилитарная утилита для удаления, ошибки все равно будут сделаны, и их будет намного труднее прочитать. Плюс, если вам нужно работать в командной ситуации, особенно если люди закатывают/откатывают проект, это может быть нелегко понять.

• вы можете создать объект-указатель, скажем, templates = {}, и загрузить его с помощью указателей объектов jquery в ваши элементы, похожие на клонирование:

   templates = {};
   templates.message = $("#templates .message");
   templates.dialog = $("#templates .dialog");
  

теперь все, что вам нужно сделать, чтобы создать новый шаблон:

var newDialog = templates.dialog.clone();

Вы можете сделать функцию-оболочку для принятия параметров, а затем добавить их с помощью newDialog.find("title").html(title), newDialog.find("message").html(message), и т.д.

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

Еще одним важным аспектом производительности является выбор времени... если вы испытываете задержки в производительности, вы должны обязательно разбить свои куски длинного исполняемого кода с помощью setTimeout. Он создает новый стек и позволяет браузеру рисовать то, что он уже обработал до точки непосредственно перед созданием нового стека. Это очень помогает при рассмотрении визуальных задержек как часть проблемы с производительностью (как правило, наиболее часто встречающаяся проблема производительности, особенно не-кодировщики). Если вам нужна дополнительная информация, отправьте мне сообщение, и я соберу некоторые ресурсы. Ограниченное время прямо сейчас, пуская огонь на работу.:)

Ответ 2

Недавно я сделал это упражнение, и хотя подход тега <script> кажется немного взломанным, я принял это как хорошее решение и выбрал свою собственную версию (версия Джона Реджига обволакивает очень хорошо, но я пошел сам по себе понятный для моей собственной версии мозга)

Моя версия является базовым шаблоном и заменой с использованием заменяемых значений в form ##VALUE##

ШАБЛОН: (шаблон одного шаблона или шаблон строки)

<script type="text/html" id="ItemTemplate">
<table>
  <tr>
    <td>##LABEL1##</td>
    <td>##VALUE1##</td>
  <tr>
</table>
</script>

СОДЕРЖАНИЕ КОНСТРУКЦИИ:

function constructFromTemplate(content, values, appendTo) {
    var modifiedHtml = content;
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##');

    $.each(values, function (n, v) {
        modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v);
    });

    if (appendTo != null) 
    {
        $(appendTo).append(modifiedHtml);
        //initializePageElements();
    }

    return modifiedHtml;
}

ИСПОЛЬЗОВАНИЕ

Содержимое будет возвращено из функции и/или вы можете установить параметр appendTo, чтобы установить elementID автоматически append содержимое. (установите null не append)

Заменимые значения просто добавляются как динамический объект, где имена object являются заменяемыми элементами.

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

Примечание: Я прокомментировал //initializePageElements();, это используется для инициализации плагинов jQuery, стилей в шаблоне.

Только встроенные стили, кажется, работают при вставке содержимого в DOM

Ответ 3

посмотрите https://github.com/inspiraller/STQuery

STQuery использует все те же имена методов, что и jquery, но вместо того, чтобы манипулировать элементами в dom, он работает непосредственно над строкой:

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>';

var ST = STQuery(strTemplate);

ST.find('h1').html('Hello');
ST.find('.content').html('World!');

var strTemplateUpdated = ST.html();

Это сохраняет логику отдельно от шаблона, т.е. ненавязчивые html-шаблоны.

Преимущества перед jquery состоят в том, что STQuery не нужно сначала записывать в DOM, что означает, что вы можете использовать веб-работников или выполнять все ваши манипуляции с шаблонами на сервере. Примечание. Начиная с этого сообщения, stquery был написан только в javascript, поэтому его нужно будет преобразовать на выбранный на стороне сервера язык.

Ответ 4

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

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

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

Мне бы очень хотелось услышать, как другие решают эту проблему.

Ответ 5

Я успешно использовал script с моей инфраструктурой jquery pure html templates

Что касается лучших практик, ознакомьтесь с новым интерфейсом twitter, используя одну страницу для всего и только внутреннюю маршрутизацию через "#!/paths".

Использование одностраничных веб-сайтов для очередного большого шага для веб-приложений, лично мне нравится называть его web 3.0:). Это также устранит проблему с тем же шаблоном на каждой странице - у вас будет только одна страница.

Ответ 6

В asp.net mvc я часто собираю свои общие шаблоны в частичном представлении, которое я могу включить там, где оно мне нужно. Таким образом, мне не нужно повторять свои шаблоны повсюду.

Другой подход заключается в том, чтобы ваши шаблоны в отдельных файлах. Как newslist.tmpl.html, который позволяет вам загрузить шаблон с помощью ajax. Учитывая это можно сделать параллельно с загрузкой данных, это не должно замедлять ваше приложение, так как оно, скорее всего, быстрее, чем вызов данных.