<!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. anacondas 下 安装xgboost & keras

    mac : 安装anaconda, cd到anaconda 目录下 pip install xgboost 测试: 在当前的¥ python , 进入python 环境 import xgboost ...

  2. eclipse——Maven创建JavaWeb工程

    打包方式改为war 问题:webapp目录下缺少web.xml文件 先勾选掉Dynamic Web Services 点击Applay 再勾选上Dynamic Web Services ,目的是为了产 ...

  3. Selenium家谱

    自动化测试一词也算是整个测试行业里面比较热门的一个词儿,工资高,前景好,有实力,有态度等等,很多企业的管理者也在不断的扩大自己的队伍和职能,这也是导致自动化测试比较流行的原因之一.但是很多企业做自动化 ...

  4. (转)ASP.NET基础之HttpHandler学习

    原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...

  5. 编写高质量代码改善C#程序的157个建议——建议14： 正确实现浅拷贝和深拷贝

    建议14: 正确实现浅拷贝和深拷贝 为对象创建副本的技术称为拷贝(也叫克隆).我们将拷贝分为浅拷贝和深拷贝. 浅拷贝 将对象中的所有字段复制到新的对象(副本)中.其中,值类型字段的值被复制到副本中后, ...

  6. ntroducing K-Pattern: A Rapid Way to Make CRUD Operations with Entity Framework

    Download Source Introduction Earlier in the last year I made a different approach to work on Entity ...

  7. .net 基元类型，引用类型和值类型

    基元类型(primitive type): 编译器直接支持的数据类型称为基元类型(primitive type). string 与 String: 由于C#中的string (一个关键字)直接映射到 ...

  8. Visual Assist X破解安装及设置

    本文提供的插件版本为Visual Assist X 10.9.2248,支持Visual Studio 2010~2017各版本,本人亲测均可正常使用. 一. 插件下载: 点击下载链接,找到对应软件下 ...

  9. 转载 Adobe DreamweaverCS6安装及破解

    一:安装 百度链接:链接:http://pan.baidu.com/s/1dF8hTex 密码:zrew   (重点) 1) Adobe DreamweaverCS6中文版下载 2)Adobe Dre ...

  10. Python DataFrame 如何删除原来的索引，重新建立索引

    删除行索引重排: ser.reset_index(drop = True) df.reset_index(drop = True) ---------------------------------- ...