JS模板引擎 | 吕神的自我修养

百度JS模板引擎 baiduTemplate

2015.06.04

BaiduTemplate

最简单好用的JS模板引擎，JS语法学习无成本，调用也只是一个函数哦！

项目地址：http://tangram.baidu.com/BaiduTemplate/

//直接复制即可使用，记得要下载baiduTemplate.js
//index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>

<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>

</head>
<body>
<div id='result'></div>

<!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->
    <!-- 输出变量语句，输出title -->
    <h1>title:<%=title%></h1>
    <!-- 判断语句if else-->
    <%if(list.length>1) { %>
        <h2>输出list，共有<%=list.length%>个元素</h2>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<5;i++){%>
                <li><%=list[i]%></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>没有list数据</h2>   
    <%}%>
</div>  
</script>
<!-- 模板1结束 -->

<!-- 使用模板 -->
<script type="text/javascript">
var data={
    "title":'欢迎使用baiduTemplate',
    "list":[
        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',
        'test2:',
        'test3:',
        'test4:list[5]未定义，模板系统会输出空'
    ]
};

//使用baidu.template命名空间
var bt=baidu.template;

//可以设置分隔符
//bt.LEFT_DELIMITER='<!';
//bt.RIGHT_DELIMITER='!>';

//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;

//最简使用方法
var html=bt('t:_1234-abcd-1',data);

//渲染
document.getElementById('result').innerHTML=html;
</script>

</body>
</html>

JavaScript模板引擎Arttemplate

2014.03.06

现在程序开发一般都使用MVC这样的设计开发模式，将数据的输入、处理、输出三步明确的分开，有利于项目开发中的分工与提高开发效率。将M与V分开后，可以将数据输出到各种前端展现方式，在V的层面一系列数据你可以用柱状图表现，也可以用HTML表格表现，V的分离使得死的数据可以被活灵活现的展示给用户，提高用户体验度。至于MVC的模式的优缺点，不是此文的目的，就不多叙了。

前端展示的多样化，加大了前端开发人员的工作量，也对前端开发人员的能力有了更多的要求，但使用“模板引擎”一定程度上帮助前端开发人员使用自己熟悉的标签语言就能达到开发要求。

一般的web开发要使用和后台开发程序配合的模板引擎，但随着用户体验的更高追求，页面无刷新或部分刷新的ajax被广泛应用后，js发送ajax请求回来的数据格越来越多，这些数据返回后一般都使用简洁的json格式，节约流量和提高效率，但json并不能直接在页面展示，而要通过js再转换拼装成html代码，将json这类的数据转换成html代码输出的这个过程就是本文要说的正题了。

Arttemplate 超快的前端模板引擎

artTemplate 新一代 javascript 模板引擎

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍（性能测试）。

引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题（详情）。

另外，artTemplate 的模板还支持使用自动化工具预编译，支持将模板转换为 js 文件。

官方网站：

http://aui.github.io/artTemplate/