JavaScript模板引擎学习分享

为了将数据库中的一组记录转换成HTML输出到界面上，大家都采用哪些做法呢？

在WebForm时代我们经常使用datagrid、repeater，当MVC问世后我们开始直接在视图上编写C#循环语句，而现在我更喜欢使用JavaScript模板引擎来生成HTML。因为这种做法的最大好处是实现了前后端代码的解耦，前端开发人员也无需了解太多的C#知识。

用法与示例：

第一步，在页面中引入JavaScript模板引擎：

function template(str, data) {
var strFunc =
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str.replace(/[\r\t\n]/g, " ")
.replace(/'(?=[^#]*#>)/g, "\t")
.split("'").join("\\'")
.split("\t").join("'")
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');";
func = new Function("obj", strFunc);
return func(data);
}

第二步，准备HTML模板：

<script type="text/html" id="temp_class">
<# for(var i=0;i<datalist.length;i++){ #>
<div class="panle">
　　　　　　　课程编号：<#= datalist[i].ClassId #>
　　　　　　　课程名称：<#= datalist[i].ClassName #>
</div>
<# } #>
</script>

第三步，准备数据与输出HTML：

function loadPage() {
var classList = [
{ ClassName: "数据结构", ClassId: "1001", CreateOn: "2015-05-01 08:20:36", CreatedBy: "管理员"},
{ ClassName: "线性代数", ClassId: "1003", CreateOn: "2015-05-03 19:21:25", CreatedBy: "管理员"},
{ ClassName: "高等数学", ClassId: "1004", CreateOn: "2015-05-03 19:20:39", CreatedBy: "管理员"}
];
var strTempHTML = document.getElementById("temp_class").innerHTML;
document.getElementById("class_list").innerHTML = template(strTempHTML, { datalist: classList });
}

备注：classList对象是需要后端开发人员输出的，在MVC中我们可以直接使用ViewBag对象将后端变量输出到JavaScript代码中。

效果预览：





[b]其它模板引擎介绍：[/b]Underscore.js

[b]优点总结：[/b]

1、前端人员可以更加自由的对HTML结构进行更改，不再依赖后台开发。

2、模板语法支持if等JavaScript语法，用法简单，减小了代码复杂度。

3、HTML代码结构清晰，可阅读性强。

[b][b]本文DEMO：[/b][/b]下载地址