<!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--修改表单数据并提交

    目的: ​点击'编辑',弹出对话框,修改数据. 主要知识点: prevAll(),获取同级别本元素前面的所有元素. 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  2. DataTable 转换成匿名集合类

    using System;using System.CodeDom.Compiler;using System.Collections.Generic;using System.Data;using ...

  3. Position Independent Code (PIC) in shared libraries

    E原文地址:http://eli.thegreenplace.net/2011/11/03/position-independent-code-pic-in-shared-libraries/下一文: ...

  4. (转)EASYUI+MVC4通用权限管理平台

    原文地址:http://www.cnblogs.com/hn731/archive/2013/07/15/3190947.html 通用权限案例平台在经过几年的实际项目使用,并取得了不错的用户好评.在 ...

  5. React学习笔记3

    React的生命周期   生命周期分为三个阶段   1.mounted(初始化的时候) 当我们看见页面元素从JSX变成了DOM节点时,React组件已经被载入(mounted)到页面中了   2.up ...

  6. [other] 代码量代码复杂度统计-lizard

    [other] 代码量代码复杂度统计-lizard lizard的可以用来统计下面的一些数据 不包含代码注释的代码行数 CCN 代码的复杂度,也就是分支复杂度 token的个数(关键字,标示符,常量, ...

  7. wp7启动+幻灯片效果

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Wi ...

  8. C# Socket 发送&接收&返回

    因为工作比较忙,好久没有写过博客了,最近因项目需求,需要用到Socket来进行通信,简单写了几个例子,记录一下,代码很简单,无非就是接收与发送,以及接收到数据后返回一个自定义信息,也可以说是发送. 先 ...

  9. mysql 新建数据库与表

  10. 【kudu pk parquet】runtime filter实践

    已经有好一阵子没有写博文了,今天给大家带来一篇最近一段时间开发相关的文章:在impala和kudu上支持runtime filter. 大家搜索下实践者社区,可以发现前面已经有好几位同学写了这个主题的 ...