Применение шаблонов в JavaScript

uggway

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

Также смотрим за развитием этого скрипта здесь
Здесь применяются те же принципы, которые и в других системах обработки шаблонов.
template(t)Конструктор объекта, может получать в аргументе t шаблон.
set_vals(vals)Передает в объект необходимые данные, в виде ассоциативного массива {ключ:значение}, либо массива таких массивов.
set_templ(t)Устанавливает или переопределяет шаблон
replace(rv, vals)Функция замены ключей на значения из массива vals в строке rv. Используется в методе out().
out(mo, id)Функция вывода темплейта в innerHTML элемента id (с id = id) или возвращает строку с обработанным шаблоном. При mo == true, обрабатывает многомерный массив данных.

В качестве ограничителя ключа по умолчанию используется знак "!". Его можно заменить на нужный присвоив значения template.bc и template.ec (для начала и конца ключа соответственно)

Код класса template Скачать


var template = function(t){
    if(t) this.templ = t;
}

template.prototype={
	templ:"",
	vals:[],
	bc:"!",
	ec:"!",
    set_vals:function(vals){
        this.vals = vals;
    },
    set_templ:function(t){
        this.templ = t;
    },
    replace:function(rv, vals){        
        for(var v in vals) {
            var re = new RegExp(this.bc + v + this.ec, "g");
            rv = rv.replace(re, vals[v]);
        }
        return rv;
    },
    out:function(mo, id){
        var rv = "";
        var tt = this.templ;
        if(typeof id == "string") id = document.getElementById(id);
        
        
            if(mo) {
                for(var v in this.vals){
                    rv += this.replace(tt, this.vals[v]);
                }
            } 
            else            
            {
                rv = this.replace(tt, this.vals);
            }            
            if(id) id.innerHTML = rv;
			else return rv;
        
    }
}

Пример применения

Исходный код примера



<html>
<head>
<script src='template.js'></script>
<style> 
.dcl{
    padding:5px;
    border:1px solid gray;
    background:#f0f0f0;
	float:left;
	display:block;
}
.dcl:hover{
    border:1px solid #cecece;
    background:#f5f5f5;
	}
#outdiv{
	border:1px solid gray;
	width:500px;
}	
#menu{
	border:1px solid gray;
}
#body{
	text-align:center;
	border:1px solid gray;
	height:300px;
}
#footer{
	border:1px solid gray;
	text-align:center;	
	padding:5px;
}
</style>
</head>
<body>
	<div id='outdiv'></div>
<script> 
var tex_base = "<div id='menu'>!menu!<div style='clear:both'></div></div><div id='body'>!body!</div>"
"<div id='footer'>!footer!</div>";
var tex_menu = "<div class='dcl'><a href='!url!'>!name!</a></div>";
var data_ex=[ {"name" : "name1", "url" : "url1"},
             {"name" : "name2", "url" : "url2"},
             {"name" : "name3", "url" : "url3"},
             {"name" : "name4", "url" : "url4"},
             {"name" : "name5", "url" : "url5"}
            ];
 
var tm = new template(tex_menu); // create menu
    tm.set_vals( data_ex );
var tb = new template(tex_base); // create base
var data_base = {"menu": tm.out( true ), "body": "Body message!", "footer":"this is footer :)"};
tb.set_vals( data_base );
tb.out( false,  'outdiv');
</script>
</body>
</html>

В этом примере показана генерация меню из шаблона в tex_menu и тела всего блока из tex_base. Данные для меню берутся из data_ex (вывод в мультирежиме), а для основного блока формируются в data_base. Вывод обработанного шаблона производится в div-элемент outdiv.

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

Коментарии