<!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. 再谈JQuery插件$.extend(), $.fn和$.fn.extend()

    在我的博客中,曾经写过一篇关于JQuery插件的文章  https://www.cnblogs.com/wphl-27/p/6903170.html 今天看一个项目的代码时,看到使用JQuery插件部 ...

  2. Date3.19

    1.正则表达式的定义及使用2.Date类的用法3.Calendar类的用法========================================================1正则表达式的 ...

  3. C++读取txt文件（VS）

    最常用的方法?https://www.cnblogs.com/nkzhangcheng/p/7722568.html https://blog.csdn.net/a125930123/article/ ...

  4. LibreOJ 6283 数列分块入门 7(区间加区间乘区间求和)

    题解:这道题要打一个乘标记一个加标记,两个标记的优先级是乘法高,所以在乘的时候要将加标记同时乘上一个c,当然,对于每个非完整块一定要记得暴力重构整个块,把加标记和乘标记都初始化. 代码如下: #inc ...

  5. 如何在DOS下以管理员身份执行命令？

    原创 普通User的DOS窗口: 以管理员身份运行的DOS窗口: 转换(Windows10系统下): 13:11:55 2018-10-18

  6. arcgis for android常见问题回答

    Q:arcgis for android最新版本是多少?(2014-7-18) Arcgis for android 10.2.3 sdk 百度盘下载地址:http://pan.baidu.com/s ...

  7. Mongo Windows 基本使用入门

    1.安装https://www.mongodb.com/download-center#community注意:安装 "install mongoDB compass" 不勾选下载 ...

  8. WinForm中DataGridView的使用（六） - 特殊处理的小地方

    列标题不能居中的解决方法 一般列标题的居中我们都使用this.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignmen ...

  9. .NET中的程序集

    参考:http://blog.sina.com.cn/s/blog_7ade159d0102wmg9.html 程序集(Assembly,装配件,.NET程序集) 程序集是应用程序的部署单元,.NET ...

  10. 微信 oauth2 两次回调

    场景: logger.Info("f: " + wx.From); logger.Info("c: " + wx.Code); logger.Info(&quo ...