简单的 js 模版引擎
简单的 js 模版引擎
var tplEngine = function(tpl, data) {
var reg = /<%([^%>]+)?%>/g,
regOut = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0;
var add = function(line, js) {
js? (code += line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
}
while(match = reg.exec(tpl)) {
add(tpl.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(tpl.substr(cursor, tpl.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
};
var template = `
My skills:
<%if(this.showSkills) {%>
<%for(var index in this.skills) {%>
<a href="#"><%this.skills[index]%></a>
<%}%>
<%} else {%>
<p>none</p>
<%}%>
`
console.log(tplEngine(template, {
skills: ["js", "html", "css"],
showSkills: true
}));
简单的 js 模版引擎的更多相关文章
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- JS模版引擎[20行代码实现模版引擎读后感]
曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- js模版引擎开发实战以及对eval函数的改进
简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——关于HTML编码
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- 使用localstorage及js模版引擎 开发 m站设想
目前 m站开发的方式,依然请求完整的html,这样造成的问题就是每次请求的数据量过大过多,在没有wifi的情况下,导致页面打开的速度很慢,耗费的流量也较多:访问m站的多是移动端设备,其浏览器的版本都较 ...
- Epii.js 一个极其简单的Js模板引擎
Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...
- handlebars.js模版引擎随记
前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便 首先github上下载自新版本的handelbars.js http://handlebarsjs.com 下载下来之后呢 ...
随机推荐
- Linux一些服务的启动命令
http:服务service httpd start 启动 service httpd restart 重新启动 service httpd stop 停止服务 启动ssh服务 # /etc/init ...
- ArcGIS pro 发布地图服务(一)动态地图服务
1.软件:arcgis pro 2.4 数据:.mxd文档. 2.导入mxd文档. 3.登录portal账号 4.分析—发布 5.在server中的地图服务 JavaScript api 查看 6. ...
- UVA - 12183 :Top Secret(N^2的循环矩阵乘法)
pro:N个数排成一圈.一次操作为,每个位置的数+=L*左+R*右,保留x为整数. 问S轮操作后每个位置的值. N<=1000,S<=2^30,x<=9 . sol:不难想到矩阵乘法 ...
- 关于AndroidStudio项目app在手机上运行遇到登录网络问题的解决
又得提到我熟悉的12月份末尾,依旧想着把自己遇到的问题给大家看看,顺便分享我的解决办法. 看过我第一个发的随笔就知道,我遇到过给项目app打包成apk的问题啊,虽然解决了,但是运行到手机上 就又出现了 ...
- JSP九大隐式对象和四大域对象-----面试
因为jsp实质是一个Servlet对象:jsp在第一次访问时会被Web容器翻译成Servlet,在执行过程:第一次访问---->inex.jsp---->index_jsp.java--- ...
- Postgresql operator does not exist: numeric = character varying
)),series_name from svcm_t_series_res: 原来series_id是numeric型,现在转换为varchar(64):
- Thread线程框架学习
原文:https://www.cnblogs.com/wangkeqin/p/9351299.html Thread线程框架 线程定义:线程可以理解为一个特立独行的函数.其存在的意义,就是并行,避免了 ...
- sphinx doc 文档生成脚手架工具
sphinx 在python 语言开发中,是一个使用的比较多文档生成脚手架工具,我们帮助我们生成 专业的帮助文档,同时也有远端的免费saas 托管服务,方便分发 安装 sphinx 的安装好多方便,m ...
- 洛谷 P4707 重返现世
洛谷 P4707 重返现世 k-minimax容斥 有这一个式子:\(E(\max_k(S))=\sum_{T\subseteq S}(-1)^{|T|-k}C_{|T|-1}^{k-1}\min(T ...
- P2624 [HNOI2008]明明的烦恼
#include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...