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

Почему бы просто не загрузить свои шаблоны в скрытый элемент, а затем использовать $(template).clone()? Это избавляет от многих головных болей. Я не могу говорить о производительности при подходе .clone() по сравнению с подходом <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. Он создает новый стек и позволяет браузеру рисовать то, что он уже обработал до момента непосредственно перед созданием нового стека. Это очень помогает при работе с визуальными задержками как частью проблемы с производительностью (как правило, это наиболее распространенная проблема с производительностью, особенно среди тех, кто не занимается кодированием). Если вам нужна дополнительная информация об этом, отправьте мне сообщение, и я соберу некоторые ресурсы. Сейчас ограниченное время, тушение пожаров на работе. :)

Я недавно сделал это упражнение, и хотя подход с тегом <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 работают только встроенные стили.

посмотрите на 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, поэтому его необходимо преобразовать в выбранный язык на стороне сервера.

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

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

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

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

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

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

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

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

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