分享一个Javascript的模板引擎 JTemplate
Javascript的模板一般用于带有Ajax的项目之中。
Ajax的服务端返回值一般都是json/xml形式的纯数据，不带有html代码，若不使用Javascript模板，则需要通过Js拼接字符串来完成前端页面的展示。
拼接字符串的代码，不仅写起来让人很不爽，并且让人看起来也很不爽。尤其是纠结于各种单引号双引号的转义问题。有时很难捋清楚。
如果使用模板引擎，就丝毫不会出现这种纠结。
先贴Github地址: https://github.com/zengohm/JTemplate
Github中有压缩和未压缩两个版本。包含有测试页面，测试页面里面有模板最基本的使用方法。
现在在介绍一下模板：
1、模板以HTML的注释形式出现，所以不会影响到整个页面显示。
模板的格式为：
<!--[模板名[ 模板内容，可换行 ]]-->
2、模板可以出现在HTML中的任何位置，但是不可以有重名模板。
3、使用模板需要在JTemplate文件和模板都载入完成后才能使用。
4、模板中使用的变量全部来自$JT函数的第二个参数。
例如 {startString:'Start'}
在模板中$startString的值即为'Start'
5、使用变量时，需要在前面增加$符号。
6、模板中使用模板语言时，需要用<# 和 #>进行定界。
7、模板语言除了增加echo 作为输出关键字以外，其他都与javascript语法相同。
8、$JT函数返回字符串，需要通过JS添加字符串到相应的地方。
最后来看看模板使用的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>JTemplate - Test</title>
<!-- 引入JTemplate文件 -->
<script type="text/javascript" src="https://files.cnblogs.com/zohm/JTemplate.min.js"></script>
</head>
<body>
<div id="displayBlock"></div>
<!--[TestTemplate[
<h4>输出字符串</h>
<p>在模板中使用变量需要在变量名前加$符号</p>
<# echo $startString #>
<h4>If-Else条件</h4>
<# if(false){ #>
False!
<# }else if(true){ #>
True!
<# } #>
<h4>For循环<h4>
<p>此处fruits是调用时，第二个参数中的成员变量</p>
<ul>
<# for($i=0;$i<$fruits.length;$i++){ #>
<li><# echo $fruits[$i] #></li>
<# } #>
</ul>
]]-->
<script type="text/javascript">
var jsonCode = {startString:'Start!',fruits:['Apple','Pear','Orange']};
//使用$JT来调用模板引擎,第一个参数为模板名称（和后面模板中名称相同），第二个参数为模板中使用的变量，以关联数组的Key为变量名，Value为值
document.getElementById('displayBlock').innerHTML = $JT('TestTemplate',jsonCode);
</script>
</body> </html>
这里是页面的执行结果：
如果是写过Javascript的同学应该很容易看明白JTemplate的使用方法。
特别提醒一点，Github中的未压缩版本附带有debug代码，如果模板有错误，JTemplate会通过Console.log把错误打印到控制台。
但是压缩版就不带有这个特性了。如果发生错误，就会返回空字符串。
好了，关于JTemplate，我就不再多介绍了，更多的新特性可以自己去发现。
