本质

• 正则、替换

特性

• 拥有接近 JavaScript 渲染极限的的性能
• 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
• 支持压缩输出页面中的 HTML、CSS、JS 代码
• 支持 Express、Koa、Webpack
• 支持模板继承与子模板
• 兼容 EJS、Underscore、LoDash 模板语法
• 模板编译后的代码支持在严格模式下运行
• 支持 JavaScript 语句与模板语法混合书写
• 支持自定义模板的语法解析规则
• 浏览器版本仅 6KB 大小

渲染变量

// 标准语法
<div id="box">
</div>

<script type="text/html" id="tpl">
    <h1>{{title}}</h1>
</script>

var data={
    title:"hello osoLife"
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

// 原始语法
<div id="box">      
</div>

<script type="text/html" id="tpl">
    <%=msg%>
</script>

var data={
    msg:"hello world"
};
var htmlStr="";
htmlStr=template("tpl",data); 
$("#box").html(htmlStr);

渲染列表

<div id="box">  
</div>

<script type="text/html"  id="tpl">
    <%for(var i=0;i<artList.length;i++){%>
        标题是：<%=artList[i].title%><br/>
    <%}%>
</script>

var data={
    artList:[
        {title:"第一个标题"},
        {title:"第二个标题"},
        {title:"第三个标题"},
        {title:"第四个标题"},
        {title:"第五个标题"}
    ]
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

字符串模板编译

// 模板放到JS里
// 示例一：
<div id="box">
</div>

var tplStr="<%=msg%>"; // 模板字符串
var data={msg:"osoLife"};
var render=template.compile(tplStr); // 生成一个编译函数
var htmlStr=render(data); // 使用渲染函数，渲染数据，返回htmlStr
$("#box").html(htmlStr);

// 示例二：
<div id="box">
</div>

var str='<ul>'+
    '<%for(var i=0;i<arr.length;i++){%>'+
    '<li><%=arr[i]%></li>'+
    '<%}%>'+
    '</ul>';
var data={
    arr:['A','B','C']
};
var render=template.compile(str); //编译普通字符串
var htmlStr=render(data);
$("#box").html(htmlStr);

each（循环）

// 标准语法
// 1.循环数组
<div id="box">
</div>

<script type="text/html" id="tpl">
    <h1>{{title}}</h1>  
    <ul>
        {{each content value key}}  
        <li>{{value}}</li>
        {{/each}}
    </ul>
</script>

var data={
    title:'兴趣爱好',
    content:['上网','骑车','打球']
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

// 2.循环JSON
div id="box">
</div>

<script type="text/html" id="tpl">
    <ul>
        {{each json value key}} 
        <li>{{key}}------->{{value}}</li>
        {{/each}}
    </ul>
</script>

var data={
    json:{
        a:'A',
        b:'B',
        c:'C'
    }
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

// 原始语法
<div id="box">
</div>
    
<script type="text/html" id="tpl">
    <h1><%=title%></h1>
    <ul>
        <%for(var i=0;i<arr.length;i++){%>
            <li><%=arr[i]%>---><%=i%></li>
        <%}%>
    </ul>
</script>

var data={
    title:'hello world',
    arr:['A','B','C']
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

include

// 标准语法
<div id="box">
</div>
    
<script type="text/html" id="tpl">
    <h1>{{title}}</h1>
    {{include 'list'}}
</script>
<script type="text/html" id="list">
    <ul>
        {{each json value key}} 
        <li>{{key}}------->{{value}}</li>
        {{/each}}
    </ul>
</script>

var data={
    title:'hello world',
    json:{
        a:'A',
        b:'B',
        c:'C'
    }
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

// 原始语法
<div id="box">
</div>
    
<script type="text/html" id="list1">
    <h1><%=title%></h1>
    <ul>
        <%for(var i=0;i<arr.length;i++){%>
            <li><%=arr[i]%>---><%=i%></li>
        <%}%>
    </ul>
    <%include('list2')%>
</script>
<script type="text/html" id="list2">
    <ol>
        <%for(var key in json){%>
            <li><%=key%>-----><%=json[key]%></li>
        <%}%>
    </ol>
</script>

非转义输出

示例：
{{#msg}}或<%=#msg%>

<div id="box">
</div>
    
<script type="text/html" id="tpl">
    <p><%=#title%></p>
</script>

var data={
    title:'<strong>我是加粗了</strong>',
};
var htmlStr=template("tpl",data);
$("#box").html(htmlStr);

修改界定符（自定义模板标记）