Просмотров: 1 312

Что такое шаблоны Javascript и зачем они нужны?

14-07-2013 15-40-18

До тех пор, пока вы разрабатываете простые приложения на языке Javascript, у вас не будет особых проблем с выводом данных на веб-страницу.

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

Например, нужно вывести на страницу список пользователей сайта со всеми их параметрами (например, id, имя. Могут быть также возраст, пол, и.т.д.). Предположим, что эти данные находятся внутри объекта usersData

var usersData = [
    { name: "Dima", id: 1 },
    { name: "Katy", id: 2 },
    { name: "Lena", id: 3 }
];

Чтобы решить эту задачу, Вы можете воспользоваться циклом, тогда решение может выглядеть вот так:

for(var i=0; i<userData.name.length; i++) {
    clRec += "<li><a href=user"+userData.id[i]+"'>" + userData.name[i] + "</a></li>";
}

Согласитесь, что работать с такой формой записи может только программист, который умеет писать на языке Javascript. Предоставьте такой код верстальщику, и он ничего там не поймет.

Но, куда более наглядно будет вывод данных вот в такой форме:

<li><a href="clients : {{:id}}">:{{:name}}</a></li>

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

Такая форма записи становиться возможной при использовании так называемых шаблонов.

Шаблон – это определенная заготовка в HTML-коде, которая написана по определенным правилам. Когда Javascript-код начинает взаимодействовать с такой заготовкой, код шаблона будет преобразовываться в HTML-код или узлы DOM-дерева на странице.

Синтаксис шаблонов в Javascript может быть разным. Единого стандарта нет и все будет зависеть от того, какой библиотекой или плагином вы будете пользоваться.

Вот шаблон, который создает меню на сайте:

<ul class="menu">
<% $(items).each(function() { %>
  <li><a href="#<%=this.link%>"><%=this.html%></a></li>
<% }); %>
</ul>

Здесь вместо фигурных скобок используется вот такая форма записи <% %>

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

.myButton {
        <% if (boxShadow) { %>
        box-shadow:<%= boxShadowInset ? 'inset' : '' %> <%= boxShadowOffsetX %> <%= boxShadowOffsetY %> <%= boxShadowBlurRadius %> <%= boxShadowSpreadRadius %> <%= boxShadowColor %>;
        <% } if (!solid && !transparent) { %>
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, <%= bgTopColor %>), color-stop(1, <%= bgBottomColor %>));
        background:linear-gradient(to bottom, <%= bgTopColor %> 5%, <%= bgBottomColor %> 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<%= bgTopColor %>', endColorstr='<%= bgBottomColor %>',GradientType=0);
        <% } %>

Подводя итог, давайте посмотрим, какие преимущества будет нам давать использование шаблонов:

+ Интуитивно понятный код, даже не для программиста;

+ Более сокращенная форма записи;

+ Данные, javascript-код и вывод данных на страницы отделены друг от друга, так ими намного проще управлять.

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

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