Компактный и гибкий Javascript шаблонизатор
В последние дни на Хабре одна за одной вышли несколько статей посвященных шаблонизаторам на Javascript.
Идея вынести «View» из паттерна MVC на сторону клиента очень интересная, но поизучав существующие билиотеки я понял что мне категорически не хватает их возможностей. Простейший обход свойств объекта зачастую был невозможен.
Естественным образом родилась идея использовать в качестве языка разметки тот же Javascript.
Код получился весьма компактным и сходу удалось применить его в реальных задачах. Можно использовать всю гибкость Javascript, так как на выходе шаблонизатор его и генерит.
1. JS темплейт имеет следующий вид:
2. На HTML странице размещаем код проводящий инициализацию, загрузку темплейтов. Затем загружаем данные (допустим через JSON) и прогоняем их через наш темплейт. Загрузка и компиляция темплейтов проходит в момент инициализации объекта, в последствии можно использовать уже скомпилированный темплейт для отрисовки новых данных.
исходный код (1Kb)
Демка
Идея вынести «View» из паттерна MVC на сторону клиента очень интересная, но поизучав существующие билиотеки я понял что мне категорически не хватает их возможностей. Простейший обход свойств объекта зачастую был невозможен.
Естественным образом родилась идея использовать в качестве языка разметки тот же Javascript.
Код получился весьма компактным и сходу удалось применить его в реальных задачах. Можно использовать всю гибкость Javascript, так как на выходе шаблонизатор его и генерит.
Как пользоваться
1. JS темплейт имеет следующий вид:
<source lang="html">
<UL>
<%for (key in myobj){%>
<% if (myobj[key]>10){%>
<LI><%= key%>:<%= myobj[key] %></LI>'
<%}%>
<%}%>
</UL>
</source>
2. На HTML странице размещаем код проводящий инициализацию, загрузку темплейтов. Затем загружаем данные (допустим через JSON) и прогоняем их через наш темплейт. Загрузка и компиляция темплейтов проходит в момент инициализации объекта, в последствии можно использовать уже скомпилированный темплейт для отрисовки новых данных.
<source lang="javascript"><script src="jquery.js"></script>
<script language="Javascript" src="gs_jstpl.js"></script>
<script>
var myobj={apple:10,banana:20,orange:30};
var tpl=new gs_tpl("test_jstpl.tpl");
alert(tpl.fetch({myobj:myobj}));
alert(tpl.fetch({myobj:{blue:10,green:20,red:30}}));
$.ajax({
type: "POST",
url: "test_json.php",
dataType: "json",
data: { params: {id:12}},
success: function(ans){
var html = tpl.fetch({myobj:ans});
$('#target').html(html);
}
});
</script>
</source>
Исходный код
исходный код (1Kb)
<source lang="javascript">function gs_tpl(filename) {
this.parse=function() {
var str='html=\'\';\n';
var parts=[];
var tpl=this.tpl;
var j=i=0;
var js='';
do {
j=tpl.indexOf('<%');
if(j>=0) {
str+='html+=\''+addslashes(tpl.substring(0,j))+'\';\n';
tpl=tpl.substring(j+2);
i=tpl.indexOf('%>');
if(i>=0){
js=tpl.substring(0,i);
if(js[0]=='=') str+='html+='+js.substring(1)+';\n';
else str+=js+'\n';
tpl=tpl.substring(i+2);
}
}
}while(j>=0);
str+='html+=\''+addslashes(tpl)+'\';\n';
this.html=str;
}
this.fetch=function(data){
for(key in data) self[key]=data[key];
return eval(this.html);
}
this.load=function(filename){
$.ajax({
type: "GET",
url: filename,
dataType: "html",
async: false,
success: function(ans){
this.tpl=ans;
this.parse();
}.bind(this)
});
}
this.html='';
this.filename=filename;
this.load(filename);
}
</source>
Пример
Демка
0 комментариев