應用場景
前端如angular 和 vue 都有模板指令，后端express也可以配合使用多種模塊引擎，這些大部分都是模板渲染
要點
將模塊按照規則合成一個Function實例，然后調用
例子，實現模板引擎ejs的for功能
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板渲染</title>
<style>
</style>
</head>
<body>
<div id="list">
</div>
<!--
模板放置的地方，由于設置了type，所以瀏覽器不會把這當作JavaScript來運行
-->
<script type="text/template" id="templs">
<ul>
<% for(var i in obj){ %>
<li><%= obj[i].text %>：<%= obj[i].status %></li>
<% } %>
</ul>
</script>
<script src="mytempltes.js"></script>
<script>
new Template({
el:"list",// 渲染節點
tem:"templs", // 模板節點
data:[
{
text:"大前端",status:"火熱"
},
{
text:"大前端2",status:"火熱2"
}
]
});
</script>
</body>
</html>
mytempltes.js
(function(win,factory){
win.Template = factory;
})(this,function(options){//options就是傳入的對象
//匹配指定的字符：A:<% ... %> B:<%= %>
var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;//這個正則不是去匹配，而是根據正則替換
var el = document.getElementById(options.el);
var tem = document.getElementById(options.tem).innerHTML;
var data = options.data;
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;//特殊字符列表
//空格：$nbsp; &glt;....
var escapers = {//匹配需要匹配的字段，替換為指定的字段
"'":"'",
"\\":"\\",
"\r":"r",
"\n":"n",
"\t":"t",
"\u2028":"u2028",
"\u2029":"u2029"
}
//XSS攻擊：傳入一些特殊的字符，以混淆JS，傳入進來，導致程序錯誤或者出現Bug
var template = function(text,data){//處理業務邏輯
/*
由于語法特殊，如果單純的通過if或者其他判斷，肯定不能達到理想的效果
就需要根據已有的模板字符來動態創建方法
*/
var index = 0;
var function_body = "var dataHtml = '';";
function_body += "dataHtml += '";
text.replace(matcher,function(match,interlpolate,evaluate,offset){
/*
match：被匹配的模板字符
interlpolate：已經替換的字符
evaluate：已經替換的字符
offset：被替換字符的下標位置
指定字符串的位置：text.slice(起始位置，結束位置)
*/
function_body += text.slice(index,offset)
.replace(escaper,function(match){
return '\\' + escapers[match];//因為沒有指定的字符
});
if(evaluate){
function_body += "';"+evaluate+"dataHtml += '";
}
if(interlpolate){
function_body += "' + " + interlpolate + " + '";
}
index = offset + match.length;//已有的長度+字符的長度 = 下一個的長度
return match;
});
function_body += "';return dataHtml";
//此時render已經是一個動態的方法了
var render = new Function('obj',function_body);//通過new Functionn得到一個通過字符串生成的動態方法
return render(data);
}
el.innerHTML = template(tem,data);
});
如果覺得文章對你有點用的話，麻煩拿出手機，這里有一個你我都有的小福利（每天一次）： 打開支付寶首頁搜索“8601304”，即可領紅包。謝謝支持
