SCUD шаблонизатор

Что такое шаблонизатор и зачем он нужен? - спросите вы. И на этом сайте я попытаюсь дать вам ответ на ваш вопрос.

Шаблонизатор - это система позволяющая обрабатывать заранее заготовленные шаблоны и наполнять их каким-либо произвольными данными для последующего использования. А нужен он для того чтобы HTML код хранился отдельно от javaScript кода. Это не строгое требование стандартов, но храние кода отдельно это удобство и быстрота разработки. Шаблонизация широко прменяется для построения высоконагруженных интерфейсов, каталогов, динамически меняющиегося типового контента. Представляем вагему вниманию шаблонизатор SCUD!

SCUD - это простой, легковесный и производительный JS шаблонизатор.

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

Установка

Чтобы начать использовать шаблонизацию на вашем сайте, необходимо подключить всего один скрипт. Так как SCUD использует jQuery для загрузки шаблонов, его надо подключать после подключения фреймворка.
Добавьте в тег "<head>" следующий код, заменив "/path/to/sj/" на путь до папки в которой лежит шаблонизатор:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/path/to/sj/scud.min.js"></script>

Инициализация

После подключения вам необходимо создать объект SCUD.

var template = new scud();

SCUD может загружать шаблоны динамически, по потребности, или при инициализации объекта. В шаблонизатор встроена система кэширования шаблонов, которая позволяет не обращаться повторно на сервер за шаблоном каждый раз. Для того чтобы загрузить шаблоны при инициализации объекта, и не тратить время на загрузку шаблона при первом его использовании, достаточно передать параметр "patterns" в объект параметров.

var params = {
   patterns : ['some_template', 'another_template']
};

var template = new scud(params);

В данном примере объект создается с параметром "patterns", в результате чего сначала будут загружены все шаблоны из списка, а затем уже будет возвращен объект SCUD.

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

var params = {
   load_path : '/any/public/access/path/'
};

var template = new scud(params);

В данном примере, при загрузке шаблонов, SCUD будет искать их и пытаться загрузить из папки "/any/public/access/path/" вашего сайта. Убедитесь что эта папка доступна для чтения через HTTP.

Ниже приведена таблица параметров с описанием и значением по умолчанию.

Параметр Описание Значение по умолчанию
load_path Путь загрузки шабллонов /tpls/
patterns Массив шаблонов для предварительной загрузки []

Методы

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

Метод Описание Параметры
process_str Обработать строку как шаблон. replaceObject, pattern, callback
process_pattern Обработать шаблон. replaceObject, pattern, callback

SCUD.process_str(replaceObject, patternString, callback)

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

var template = new scud();
var JSONData = {
    helloTo : 'world'
};

template.process_str(JSONData, 'Hello {helloTo}', function(result){
   alert(result);
});

SCUD.process_pattern(replaceObject, patternName, callback)

Данный метод предназначен для обработки шаблонов, которые хранятся в файлах на сервере, большие шаблоны.

var template = new scud();
var JSONData = {
    helloTo : 'world'
};

template.process_pattern(JSONData, 'hello-template', function(result){
   alert(result);
});

Разметка

Так как шаблонизатор очень прост и не содержит логики, то операторов разметки всего 3, они представлены в таблице ниже.

Оператор Описание
{KEY} Оператор вставки переменной "key" в шаблон.
{EACH:container:pattern} Оператор цикла над элементами массива "container".
{INC:pattern} Оператор вложения кода.

{KEY}

Оператор {key} - оператор вставки данных из JSONData. Это основной, и чаще всего используемый при работе, оператор. Он позволяет вставить в шаблон какую-либо строку на место себя. В случае если оператор указан, а JSONData не содержит такого ключа, он будет просто удален из шаблона, иными словаме заменен на пустоту.
Пример использования оператора {key}:

<!-- /tps/list-contact-item.tpl -->

<div>
    <div>{name}</div>
    <div>{lastName}</div>
    <a href="{detailPageURL}">Подробнее о {buttonText}</a>
</div>

{EACH}

Оператор {EACH} - оператор цикла над массивом данных из JSONData. Оператор имеет 2 параметра. Первый - это ключ в котором хранится массив объектов, которые требуется обработать в процессе шаблонизации, например массив "option" элементов для "input" типа "select". Вторым параметром передается название шаблона к которуму нудно применять объекты массива. В случае отсутствия шаблона или ключа в JSONData, оператор будет вырезан.
Пример использования оператора {EACH}:

<!-- /tps/list-contact-item.tpl -->

<div>
    <div>{name}</div>
    <div>{lastName}</div>
    <div>
        <label>Должность</label>
        <select>
           {EACH:employeePositions:option-template}
        </select>
    </div>
    <a href="{detailPageURL}">Подробнее о {buttonText}</a>
</div>

<!-- /tps/option-template.tpl -->

<option value="{positionID}" {selected}>{positionName}</option>

{INC}

Оператор {ICN} - оператор вложения шаблона. Оператор имеет 1 параметр - имя шаблона, который требуется вложить, Например большой блок статического кода, который нет необходимости хоанить в общем шаблоне. Операторы используемые внутри вкладываемого шаблона не обрабатываются. В случае отсутствия шаблона, оператор будет вырезан.
Пример использования оператора {INC}:

<!-- /tps/list-contact-item.tpl -->

<div>
    <div>{name}</div>
    <div>{lastName}</div>
    <a href="{detailPageURL}">Подробнее о {buttonText}</a>
    {INC:static-disclaimer}
</div>

<!-- /tps/list-contact-item.tpl -->

<span class=small-text>какой-то длинный статический текст</span>

Примеры использования

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

Для примера создадим шаблон элемента списка контктов.

<!-- /tps/list-contact-item.tpl -->

<div>
    <div>{name}</div>
    <div>{lastName}</div>
    <div>
        <label>Должность</label>
        {selects}
    </div>
    <a href="{detailPageURL}">Подробнее о {buttonText}</a>
</div>

<!-- /tps/option-template.tpl -->

<option value="{positionID}" {selected}>{positionName}</option>

Далее создадим объект SCUD с предварительной загрузкой шаблона в память пользователя.

var params = {
   patterns : ['list-contact-item']
};

var template = new scud(params);

После того как объект создан, создадим структуры данных.

var JSONData = {
    name : 'Василий',
    lastName : 'Васильев'
};

var options = {
    list : [{
        positionID : 1,
        positionName : 'Инженер'
    },{
        positionID : 2,
        positionName : 'Инженер-техник'
    }]
};

Теперь, когда данные у нас есть, можно приступать к обработке шаблонов и вставке их в HTML.

// Создаем элемент управления select

template.process_str(options, '<select>{EACH:list:option-template}</select>', function(optionsHTML){
    // Добавляем к списку строку с готовым селектом
    JSONData['options'] = optionsHTML;

    template.process_pattern(options, '{EACH:list:option-template}', function(itemHTML){
        // Вставляем готовый HTML в DOM

        $.('#target-container').append(itemHTML);
    });
});

Загрузка исходных кодов

Шаблонизатор SCUD распространяется по лицензии GPL v.3.
Сборка включает в себя 2 файла scud.js и минифицированный scud.min.js

Все исходные коды вы можете скачать с  GitHub или по прямой ссылке с  сайта.