<!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. GridView删除行

    在GridView绑定数据的时候需要设置该GridView的主键值,设置的这个主键与取出来的数据的一个字段对应.比如,取出来的数据表中有个ID的字段,那设这个ID为该GridView的主键是比较好的. ...

  2. Tomcat 与 数据库连接池 的小坑

    连接池的优点众所周知. 我们可以自己实现数据库连接池,也可引入实现数据库连接池的jar包,按要求进行配置后直接使用. 关于这方面的资料,好多dalao博客上记录的都是旧版本Tomcat的配置方式,很可 ...

  3. HttpAnalyzerStdV7安装教程

    相关链接:HttpAnalyzerStdV7使用教程 安装步骤:   1.解压压缩包   2.双击运行安装文件   3.根据向导提示点击Next   4.选择接受协议,点击Next   5.修改安装路 ...

  4. Vim编码知识,乱码问题

    原文:http://demi-panda.com/2012/12/26/vim-encoding/ 在vim的初始学习阶段,乱码经常是困扰新手的一个比较烦躁的问题,本文试图阐述Vim的编码知识,及设置 ...

  5. ApplicationContex是干啥的

    ApplicationContext就是一个百宝箱 ApplicationContext是Spring的核心,Context我们通常解释为上下文环境,我想用“容器”来表述它更容易理解一些,Applic ...

  6. MongoDB整理笔记のMapReduce

    MongDB的MapReduce相当于MySQL中的“group by”,所以在MongoDB上使用Map/Reduce进行并行“统计”很容易. 使用MapReduce要实现两个函数Map函数和Red ...

  7. 在ubuntu下安装KDE以及完全卸载KDE

    自由转载 ^_^ 同时请注明原文出处:http://www.cnblogs.com/wangvsa/archive/2012/07/22/2603626.html 这是一篇翻译,很多不必要的东西就没翻 ...

  8. python 中如何判断list中是否包含某个元素

    在python中可以通过in和not in关键字来判读一个list中是否包含一个元素 theList = ['a','b','c'] if 'a' in theList: print 'a in th ...

  9. 关于pip无法安装scrapy的问题

    安装scrapy时如果出现下列问题: building ' twisted. test. raiser' extension error: Microsoft Visual C++ 14.0 is r ...

  10. win10在CMD操作MySQL时中文显示乱码

    根据网上说明直接修改数据库各种的字符集没有效果,后来经过测试发现需要先更换至旧版CMD才行. 具体总流程如下: 1.在边框栏上右键,打开属性栏. 2.选择“使用旧版控制台” 3.重启CMD,并设置字符 ...