模板引擎的简单原理template
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的更多相关文章
- 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理
什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...
- 【原创】javascript模板引擎的简单实现
本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...
- doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
- SpringBoot静态资源访问+拦截器+Thymeleaf模板引擎实现简单登陆
在此记录一下这十几天的学习情况,卡在模板引擎这里已经是四天了. 对Springboot的配置有一个比较深刻的认识,在此和大家分享一下初学者入门Spring Boot的注意事项,如果是初学SpringB ...
- 2019-07-24 Smarty模板引擎的简单应用
smarty是什么? Smarty是一个使用PHP写出来的模板引擎,是业界最著名的PHP模板引擎之一.Smarty分离了逻辑代码和外在的内容,提供一种易于管理和使用的方法,用来将原本与HTML代码混杂 ...
- 前端数据渲染及mustache模板引擎的简单实现
早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...
- 理解模板引擎Razor 的原理
Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目.Razor Pad是一 ...
- 理解模板引擎Razor 的原理(转载)
Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目.Razor Pad是一 ...
- php模板引擎技术简单实现
用了smarty,tp过后,也想了解了解其模板技术是怎么实现,于是写一个简单的模板类,大致就是读取模板文件->替换模板文件的内容->保存或者静态化 tpl.class.php主要解析 as ...
随机推荐
- (67) c# 序列化
二进制序列化器 xml序列化器 数据契约序列化器
- WIN7 下的 filemon 版本
http://blog.sina.com.cn/s/blog_594398e80100tx1q.html WIN7 下的 filemon 版本 (2011-09-26 22:26:12) 标签: fi ...
- 解决让刷新页面时不提示 "重试或取消”对话框
如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...
- 【原创】复制知乎“禁止转载”的内容做笔记 - 基于oncopy监听器的简单解决方案
原理:移除所有oncopy的监听器. 使用: 新建书签,地址设为: javascript: getEventListeners(document).copy.forEach(({listener}) ...
- 用webdriver模仿浏览器 爬取豆瓣python书单
用webdriver模仿浏览器 爬取豆瓣python书单 其中运用到os 模块 作用是生成文件夹 存储爬取的信息 etree 用于xpath解析内容 详细代码如下 可用我的上一篇博客存取到excel当 ...
- log4j/slf4j
log4j的使用 引入log4j.jar包 <dependency> <groupId>log4j</groupId> <artifactId>log4 ...
- input只读效果
有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input无效,及其value不会 ...
- Spring Boot 如何防止重复提交?
Java技术栈 www.javastack.cn 优秀的Java技术公众号 在传统的web项目中,防止重复提交,通常做法是:后端生成一个唯一的提交令牌(uuid),并存储在服务端.页面提交请求携带这个 ...
- 如何在嵌套的app中运用vue去写单页面H5
本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
- 用户积分排行榜功能-Redis实现
一.排行榜功能简介 排行榜功能是一个很普遍的需求.使用 Redis 中有序集合(SortedSet)的特性来实现排行榜是又好又快的选择. 一般排行榜都是有实效性的,比如交通数据流中的路口/路段的车流量 ...