设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

js模板引擎

2016-04-05 19:39:04.0 java  
导读:本文cobish给大家介绍 js模板引擎。在接触到js模板引擎之前,我都是使用字符串拼接的方式来操作html的标签。例如通过Ajax获取到以下一个对象,把它拼接起。。。

在接触到js模板引擎之前,我都是使用字符串拼接的方式来操作html的标签。例如通过Ajax获取到以下一个对象,把它拼接起来显示到网页上。用久了这一种方式便会发现它的缺点。代码看起来不美观,js代码里包含着大量的html代码;代码不易维护,html标签没有合适的缩进。如果再if等判断语句只会让拼接代码更加的复杂。

var data = {
    title: '四大名著',
    list: ['西游记', '三国演义', '水浒传', '红楼梦']
};

// 拼装html代码块
var html = '';
html += '<h1>' + data.title + '</h1>';
html += '<ul>';

for ( var i = 0; i < data.list.length; i++ ) {
    html += '<li>索引 ' + ( i + 1 ) + ' : ' + data.list[i] + '</li>';
}

html += '</ul>';
document.getElementById('content').innerHTML = html;


后来从「基于HTML模板和JSON数据的JavaScript交互」中学习到另一种处理方法,即将html代码放在一个隐藏的标签里,然后通过js获取到并正则匹配进行替换,最后把替换后的代码块显示在网页上。js模板引擎大致都是类似原理。


当然也有现成的模板引擎帮我们解决以上的种种问题,例如「artTemplate」,下面有一段小例子可以拿来与上面的代码对比,然后细细地品味出它们之前的不同。模板引擎我接触到的还有「Handlebars.js」,这里有一份Handlebars.js的「中文文档」和一份「使用教程」

<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
    var data = {
        title: '四大名著',
        list: ['西游记', '三国演义', '水浒传', '红楼梦']
    };

    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
</script>


(编辑: cobish)

网友评论