var templateStr = "我的名字叫<%=name%>我是一只小狗,今年<%=age%>岁。";
var data = {
name:'旺财',
age:'18'
};
/*会利用正则来匹配*/
//console.log(/<%=\s*([^%>]+\S)\s*%>/.exec(templateStr));
var match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr);
console.log(match);//['<%=name%>',name,....]
//match[1]--->name match[0]----><%=name%>
//data[match[1]]-->'旺财'
//即将<%=name%> 用 '旺财' 进行替换
templateStr = templateStr.replace(match[0],data[match[1]]);
console.log(templateStr);
match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr);
console.log(match);
templateStr = templateStr.replace(match[0],data[match[1]]);
console.log(templateStr); /*while循环实现将字符串中的所有内容替换掉掉*/
//匹配到<%=XX%>
var match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr);
while(match){//match有值
templateStr = templateStr.replace(match[0],data[match[1]]);//替换
match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr);//继续匹配<%=XX%>
}
console.log(templateStr); //原理!!
/*apply 改变函数的上下文当中的this的指向*/
template.apply({name:'xgg'},['xgg','10']);
/*也是一个方法也是一个函数*/
var template = new Function('templateStr','data',
'var match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr);while(match)
{templateStr = templateStr.replace(match[0],data[match[1]]);
match = /<%=\s*([^%>]+\S)\s*%>/.exec(templateStr)}console.log(templateStr);');
template(templateStr,data);
var template = new Function('name','age','代码块'); ​

  

模板引擎的简单原理template的更多相关文章

  1. 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理

    什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...

  2. 【原创】javascript模板引擎的简单实现

    本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...

  3. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  4. SpringBoot静态资源访问+拦截器+Thymeleaf模板引擎实现简单登陆

    在此记录一下这十几天的学习情况,卡在模板引擎这里已经是四天了. 对Springboot的配置有一个比较深刻的认识,在此和大家分享一下初学者入门Spring Boot的注意事项,如果是初学SpringB ...

  5. 2019-07-24 Smarty模板引擎的简单应用

    smarty是什么? Smarty是一个使用PHP写出来的模板引擎,是业界最著名的PHP模板引擎之一.Smarty分离了逻辑代码和外在的内容,提供一种易于管理和使用的方法,用来将原本与HTML代码混杂 ...

  6. 前端数据渲染及mustache模板引擎的简单实现

    早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...

  7. 理解模板引擎Razor 的原理

    Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目.Razor Pad是一 ...

  8. 理解模板引擎Razor 的原理(转载)

    Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目.Razor Pad是一 ...

  9. php模板引擎技术简单实现

    用了smarty,tp过后,也想了解了解其模板技术是怎么实现,于是写一个简单的模板类,大致就是读取模板文件->替换模板文件的内容->保存或者静态化 tpl.class.php主要解析 as ...

随机推荐

  1. (60)c# com com+ dcom

    一.创建COM组件 1.创建项目 2.设置使程序集可见 AssemblyInfo.cs中flase改为ture 或者 项目属性 设置可见 3.Guid生成器 在开始程序下能够找到Guid生成器 每次都 ...

  2. POJ 1410 Intersection (计算几何)

    题目链接:POJ 1410 Description You are to write a program that has to decide whether a given line segment ...

  3. 基于全局地址池的DHCP

    一.实验目的 二.实验拓扑图 .三.实验编址 四.实验步骤 1.配置IP 2.配置基于全局地址池的DHCP server 使用IP pool命令创建一个新的全局地址池,名称为hjt1 配置hjt1可动 ...

  4. 用函数递归的方法解决古印度汉诺塔hanoi问题

    问题源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上.并且规 ...

  5. 利用Graphziv帮助理解复杂的类层次关系

    最近在学习osg三维视景仿真平台,学习的过程中涉及到许多的类与类之间的继承和包含关系.在复杂点的例子中,许多的类和节点组合在一起,很容易让人迷失方向.在编译源代码的时候,无意间发现了Graphviz这 ...

  6. 系统安装2---BIOS设置

    对于新的电脑通过U盘安装Windows系统,我们第一步绝对是修改BIOS设置.在这里面我们要修改几项比较重要的选项.如下介绍: 修改第一启动项:目的就是让电脑的第一启动项变为U盘启动. 调节引导方式: ...

  7. golang的数据类型之基本数据类型的默认值和转换

    默认值: 整型的默认值:0 浮点型的默认值:0字符串的默认值:""   //空布尔类型的默认值:false package mainimport "fmt" f ...

  8. Codeforces 1140C(贪心+堆)

    题面 传送门 题意: 给出长度为n的序列b,t,定义一个子序列的值为\(\min\{ b_i\} \times \sum t_i\),求所有子序列中值最大的一个,输出最大值 分析 假如固定某个b[i] ...

  9. Mac 安装cnpm

    1.先安装node   node的下载地址:http://nodejs.cn/download/   这个没什么好说的,安装完成后测试一下,在终端输入:node -v   这时候就可以看到安装的nod ...

  10. java CountDownLatch、CyclicBarrier和 Semaphore用法

    一.CountDownLatch用法 CountDownLatch类位于java.util.concurrent中包下,利用它可以实现类似计数器的功能.比如有一个任务A,它要等待其他4个任务执行完毕之 ...