简单的html渲染模板引擎
生活随笔
收集整理的這篇文章主要介紹了
简单的html渲染模板引擎
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>簡單的html渲染模板引擎</title><script>//解析ejsvar 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;};//解析domfunction 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=htmlelement._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>
轉載于:https://www.cnblogs.com/caoke/p/5110961.html
總結
以上是生活随笔為你收集整理的简单的html渲染模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10此电脑六个文件夹怎么恢复 wi
- 下一篇： 分类图 Class Diagram