<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title>简单的html渲染模板引擎</title>
<script>
//解析ejs
var parseTpl = function( str, data ) {
var tmpl = 'var __p=[];' + 'with(obj||{}){__p.push(\'' +
str.replace( /\\/g, '\\\\' )
.replace( /'/g, '\\\'' )
.replace( /<%=([\s\S]+?)%>/g, function( match, code ) {
return '\',' + code.replace( /\\'/, '\'' ) + ',\'';
} )
.replace( /<%([\s\S]+?)%>/g, function( match, code ) {
return '\');' + code.replace( /\\'/, '\'' )
.replace( /[\r\n\t]/g, ' ' ) + '__p.push(\'';
} )
.replace( /\r/g, '\\r' )
.replace( /\n/g, '\\n' )
.replace( /\t/g, '\\t' ) +
'\');}return __p.join("");',
func = new Function( 'obj', tmpl );
return data ? func( data ) : func;
};
//解析dom
function render(element,data){
//模板转义
var tpl=element.innerHTML.replace(/</g, '<').replace(/>/g, '>')
var html=parseTpl(tpl,data||{})
if(element._render){
element._render.innerHTML=html
}else{
var div=document.createElement("div")
div.innerHTML=html
element._render=element.parentNode.insertBefore(div,element)
}
}
</script>
</head>
<body>
<div class="ejs123" >
<%for(var i=0;i<3;i++){%>
<div>ok<%=i%></div>
<%}%>
</div>
<textarea class="ejs123" >
<%for(var i=0;i<3;i++){%>
<div>ok<%=name%></div>
<%}%>
</textarea>
</body>
<script>
window.name="-caoke"
//render 第一个参数是dom元素，第二个是传入的数据
var elements=document.querySelectorAll(".ejs123")
//第一次创建
for(var i=0;i<elements.length;i++){
var element=elements[i]
render(element,{
author:"caoke"
})
}
//第二次修改
for(var i=0;i<elements.length;i++){
var element=elements[i]
render(element,{
author:"caoke"
})
}
</script>
</html>