模板渲染：根据模板来渲染数据！！！在ES6 中模板字符串用反引号表示。
let str = `我是字符串`;
下面进入正题：
我们先自己创建一个模板：
<script type="text/html" id="template">
<ul>
<% for(var i = 0 ; i < 10 ; i ++){ %>
<li>
<strong> <%= i %></strong>
</li>
<% } %>
</ul>
</script>
注意点：
1、因为模板里肯定包含js，所以我们对js特殊标记：<%这里边写js%>
2、HTML在我们眼中就是字符串，所以不用包裹
3、输出的变量，我们用<%=%>包裹
接下来：
先处理HTML标签：
自定义一个print方法用来拼接标签。
再处理js代码的包裹以及特殊的输出的变量的包裹：
这里我们使用正则处理：
HTML标签处理的正则：
/<%[^=](.*?)%>/g
输出变量处理的正则：
/<%=(.*?)%>/g
接下来进行拼接：
自定义一个函数用来拼接处理好的字符串
以上我们可以进行一波封装：
function renderTemplate( template_str , data ){
template_str = template_str.replace(/<%[^=](.*?)%>/g ,`\`); \n $1 \n print(\`` );
template_str = template_str.replace(/<%=(.*?)%>/g ,`\`); \n print($1) \n print(\`` );
template_str = `print(\`${ template_str }\`)`;
var fn_str = `(function( data ){
var html = "";
function print(str){
html += str
}
${template_str} // 这是刚才解析好的模板;
return html;
})`;
var temp_fn = eval( fn_str );
var res = temp_fn( data );
return res;
}
这样我们就封装好了。
最终我们就可以直接在页面渲染了！！！
ES6之模板渲染
原文：https://www.cnblogs.com/homeathere/p/12500668.html
