<!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>

　　

简单的html渲染模板引擎的更多相关文章

  1. 10_常见的get和post请求_路由器_ejs服务器渲染模板引擎

    1. 常见的 get 和 post 请求有哪些? 常见的发送 get 请求方式: 在浏览器地址栏输入 url 地址访问 所有的标签默认发送的是 get 请求:如 script link img a f ...

  2. 数据渲染模板引擎，template-web的使用

    一:下载 template-web.js 下载地址:https://aui.github.io/art-template/zh-cn/docs/installation.html 二:引用: 三:ht ...

  3. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  4. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  5. Js模板引擎mustache

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  6. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  7. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  8. php模板引擎

    http://baike.baidu.com/link?url=HmXfdJBv3zpCdnZPeaSmZmqDBHlyTBnz9Rmb5it-jf1_NLHfaku6_i8ssUYbnaTQEBD4 ...

  9. php模板引擎之blade

    一.简介模板引擎 模板引擎是将网站的页面设计和PHP应用程序几乎完全分离的一种解决方案,它能让前端工程师专注页面搭建,让后台工程师专注功能实现,以便实现逻辑分离,让每个人发挥所长.模板引擎技术的核心是 ...

随机推荐

  1. Office Web APP预览如何去掉顶部版权标志“Microsoft Office Web Apps”

    在Office Web APP的预览会涉及4中类型的文 件:Word.Excel.PowerPoint.PDF,不同的类型在预览时调用的文件是不一样的,其中Word和 PDF调用的是同一个文件.每个预 ...

  2. Spring Websocket与sockJS结合实现

    首先了解Stomp协议:简单的消息文本协议 采用广播机制与队列,可以和Activemq结合使用 Stomp协议学习与实战 http://diaocow.iteye.com/blog/1725186 S ...

  3. GCC 显示所有的warning option

    此事需求的来源是有要求调查,gcc中的那些warning是有问题的,代码必须要修改,那些事需要确认的,就要显示所有的warning选项是什么 查了下,方法如下 显示所有的warning和warning ...

  4. MVC 登陆鉴权

    public ActionResult Login(string data) { var _params = JsonConvert.DeserializeAnonymousType(data, ne ...

  5. ecliplse集成反编译插件

    言语不清晰,上图最直接 搜索框输入:Decompiler 等待安装: 重启之后进入下面的界面: 8.对反编译器( Decompiler )进行配置 二.配置说明 1.缺省类反编译器(Default C ...

  6. mysql 行转列，对列的分组求和，对行求和

    CREATE TABLE students( id INT PRIMARY KEY, NAME VARCHAR(11)); CREATE TABLE courses( id INT PRIMARY K ...

  7. 获取oracle 库所有表名

    (mybatis多参)

  8. postgresql删除活动链接的数据库

    当我们在使用drop database testdb命令删除数据库时,会提示该数据库正在被使用,这样我们就无法删除,此时我们可以通过如下语句断开该数据库的所有链接: SELECT pg_termina ...

  9. 汇编Shellcode的技巧

    汇编Shellcode的技巧 来源  https://www.4hou.com/technology/3893.html 本文参考来源于pentest 我们在上一篇提到要要自定义shellcode,不 ...

  10. 洛谷P2774 方格取数问题（最小割）

    传送门 考虑一下,答案就是全局和减去舍弃和 不难发现,如果我们按行数+列数的奇偶性分为两类,那么每一类中的数必然互不相邻 那么我们把原图的点分为黑点和白点两类,原地向白点连边,黑点向汇点连边,容量为点 ...