您的位置：首页 > Web前端 > HTML

简单的html渲染模板引擎

2016-01-07 19:18 716 查看

<!DOCTYPE html>
<html>
<head lang="en">
<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" style="display: none;">
<%for(var i=0;i<3;i++){%>
<div>ok<%=i%></div>
<%}%>
</div>

<textarea class="ejs123" style="display: none;">
<%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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航