简单的html渲染模板引擎
2024-10-01 09:43:55
<!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>
最新文章
- LeetCode-4MedianofTwoSortedArrays(C#)
- :before :after
- Spring @Service生成bean名称的规则
- VMware系统运维(九)VMware vSphere Client 安装
- 在WinForm中使用Web Service来实现软件自动升级
- 异常-JAVA
- 获取上海地区AQI质量数据Python脚本
- 【LeetCode练习题】First Missing Positive
- Delphi中methodaddress的汇编代码解析
- APP模板框架
- 1001. A+B Format
- 关于EasyUI中DataGrid控件的一些使用方法总结
- List之Union(),Intersect(),Except() 即并集,交集,差集运算。
- AIO5打印样式函数说明
- Linux 将本地文件上传Linux服务器, 即ssh 命令上传本地文件
- 淘宝地址爬取及UI展示
- 浅谈WPF中的MVVM框架--MVVMFoundation
- photoshop实现倾斜图片的修正
- eclipse 安装 lombok插件
- Linux shell 信号继承
热门文章
- 使用Cytoscape画PPI网络图
- 二项分布 , 多项分布, 以及与之对应的beta分布和狄利克雷分布
- tensor 维度 问题。
- Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新
- 7.python实现高效端口扫描器之nmap模块
- HTML5游戏开发进阶指南 中文pdf扫描版​
- Oracle 触发器 删除操作时再查询本表数据 功能不正确
- .Net Core 项目区域请求设置
- .net core .NET Core与.NET Framework、Mono之间的关系
- 六、Note开发工具Visual Studio Code下载安装以及Visual Studio Code的使用