Как эффективно реализовать части шаблонов javascript на стороне клиента?

#javascript #template-engine #partials

#javascript #движок шаблонов #части

Вопрос:

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

Вот несколько методов, о которых я думал:

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

2, Я мог бы поместить их все в теги скрипта внутри моего основного HTML-файла. Это будет работать достаточно хорошо, особенно с head.js (чтобы включить параллельную загрузку тегов скрипта), но все же — я думаю, что каждый тег скрипта является отдельным вызовом на сервер, верно? Это точно не улучшает ситуацию.

3, Я мог бы поместить все шаблоны в один тег скрипта (или html, я полагаю) и вручную отфильтровать через какой-нибудь разделитель … например: «#template1(строка blabla template1) #template2 (строка blablabla template2) и поместить эти строки в глобальные. Это привело бы только к одному вызову сервера, все остальное выполняется на клиенте.

Предложения? Я просмотрел существующие движки шаблонов, но я не могу точно определить, как они это делают. Код довольно сложный

Комментарии:

1. Вы хотите что-то вроде mustache.js ?

2. Вы также могли бы начать с базового движка шаблонов в underscore.js и улучшить его.

3. iCanHaz.js использует <script type="text/javascript id="template1"> TEMPLATE CONTENT </script> для чистого хранения своих шаблонов… Вы могли бы поместить их все в один HTML-файл?

4. @Nerian: Да, что-то вроде mustache, я не смог понять, что они это делают.

5. @dwarfy: Я бы предпочел использовать точечные шаблоны, но у него нет частичной поддержки. Итак, я подумал, что должен просто сделать это сам.

Ответ №1:

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

Смотрите раздел 9 (раннего) проекта спецификации и смотрите тесты набора соответствия внизу для примера загрузки пользовательского шаблона по требованию (тестовый пример «Основные вызовы и загружены точно в срок!» является соответствующим).

Основная суть в том, что загрузчики плагинов (написанные на JS) подключаются между синтаксическим анализом и компиляцией для проверки дерева синтаксического анализа. Передача плагина получает имена шаблонов сопоставления объектов для синтаксического анализа деревьев. Если они видят какие-либо частичные селекторы шаблонов (выражаясь вашим языком), они могут попытаться загрузить любые неразрешенные шаблоны, используя вызовы AJAX или файловый ввод-вывод на Node.js и добавьте части к входному объекту, чтобы заставить компилятор скомпилировать только что загруженные части вместе с общедоступными шаблонами.

С точки зрения эффективности смотрите тесты. Я нахожусь в процессе переноса кода на github: https://github.com/mikesamuel/jquery-jquery-tmpl-proposal на случай, если вы хотите сотрудничать.