文档章节

最简单的基于js实现的模版引擎

乌龟壳
 乌龟壳
发布于 2016/12/06 00:54
字数 474
阅读 113
收藏 2

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

继之前推出的70行代码实现的lua模版引擎后,又遇到了需要在js实现模版引擎的需求,遂实现之

首先是模版引擎的代码

var JTemplateEngine = function() {
	
	var encodeAsString = function(s) {
		return s.replace(/\\/g, '\\\\').replace(/'/g, '\\\'').replace(/\r/g, '\\r').replace(/\n/g, '\\n');
	}

	var compile = function(code) {
		console.log(code);
		// 输出缓冲
		var outBuf;
		// 仿php的echo函数,需要什么函数自己照着这个模式加就是了,项目中实际会有很多辅助函数
		var echo = function(s) {
			outBuf.push(s);
		}
		var __compiled;
		eval('__compiled = function(params) { ' + code + ' }');
		return function(params) {
			outBuf = new Array();
			__compiled(params);
			return outBuf.join('');
		}
	}

	var _class = function() { }

        // 解析模版字符串并编译
	_class.prototype.compile = function(template) {
		var codes = new Array();
		var buffer = new Array();
		var state = 0;
		for (i = 0; i <= template.length; i++) {
			var c;
			if (i == template.length) {
				c = '\0';
			} else {
				c = template.charAt(i);
			}
			switch (state) {
			case 0: // normal
				if (c == '{') {
					state = 1;
				} else if (c == '\0') {
					codes.push("echo('" + encodeAsString(buffer.join('')) + "');");
				} else {
					buffer.push(c);
				}
				break;
			case 1: // perhapse inside
				if (c == '%') {
					codes.push("echo('" + encodeAsString(buffer.join('')) + "');");
					buffer = new Array();
					state = 2;
				} else if (c == '\0') {
					buffer.push('{');
					codes.push("echo('" + encodeAsString(buffer.join('')) + "');");
				} else {
					buffer.push('{');
					buffer.push(c);
					state = 0;
				}
				break;
			case 2: // inside
				if (c == '%') {
					state = 3;
				} else if (c == '\0') {
					codes.push(buffer.join(''));
				} else {
					buffer.push(c);
				}
				break;
			case 3: // perhapse outside
				if (c == '}') {
					codes.push(buffer.join(''));
					buffer = new Array();
					state = 0;
				} else if (c == '\0') {
					buffer.push('%');
					codes.push(buffer.join(''));
				} else {
					buffer.push('%');
					buffer.push(c);
					state = 2;
				}
				break;
			default:
				alert("bug");
			}
		}
		return compile(codes.join('\n'));
	}

	return _class;
}();

接下来就用一个html页面来说明如何使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>template test</title>
</head>
<body>
	<div id="container"></div>
</body>
<script id="tmpl" type="text/html">
	<style>
		.t99 th, .t99 td { width: 30px; height: 30px; text-align: center;}
	</style>
	<table class="t99">
		<tr>
			<th></th>
			{% for (var i = 1; i <= params.max; i++) { %}
				<th>{% echo (i) %}</th>
			{% } %}
		</tr>
		{% for (var i = 1; i <= params.max; i++) { %}		
		<tr>
			<th>{% echo (i) %}</th>
			{% for (var j = 1; j <= params.max; j++) { %}
				<td>{% echo (i * j) %}</td>
			{% } %}
		</tr>
		{% } %}
	</table>
</script>
<script src="template.js"></script>
<script>
	var jtmpl = new JTemplateEngine();
	var tmpl1 = jtmpl.compile(document.getElementById('tmpl').innerHTML);
	document.getElementById('container').innerHTML = tmpl1({max: 9});
</script>
</html>

运行结果

输入图片说明

至于性能如何?个人项目中测试,需要渲染的页面重复生成十万次,只需要1秒多。

© 著作权归作者所有

乌龟壳

乌龟壳

粉丝 117
博文 22
码字总数 13436
作品 0
深圳
程序员
私信 提问
加载中

评论(0)

String Boot-thymeleaf使用(四)

简介 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。,可以完全替代jsp,也是spring boot官方推荐的模版引擎 Thymeleaf优势 1....

osc_4edlv799
2018/06/26
6
0
10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档。由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重...

鉴客
2012/04/12
6.3K
12
【探秘ES6】系列专栏(四):模版字符串

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/27
208
0
Jquery 引擎模板 -template详解

一、1、jTemplate简介 jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现,可以配合AJAX,JSON一起协同工作,模板内容可以用JS代码,实现了活动更新,可以自动从服务器更新...

osc_1jqxkpyl
2018/01/24
3
0
使用ThinkJS框架完成一个todolist小项目

一、环境搭建 在coding之前,我们先把环境搭好,包括数据库的安装配置以及thinkjs的安装配置。 1、数据库安装 本项目使用关系型数据库MySQL,电脑上没有安装上MySQL的同学可以自行上官网下载...

osc_sraynp8f
2018/04/01
2
0

没有更多内容

加载失败,请刷新页面

加载更多

比较好用的自媒体分发工具是哪个?

正是源于互联网生态的健康发展,从15年开始到现在,自媒体文化产业特别有关注度,其品牌形象鲜明、优秀的转化能力的数不胜数的亮点,故而吸引着数不清的创作者,而为了达到更出彩的播放量,这...

易媒助手
28分钟前
38
0
idea2020.1 pojie

前几天最新版的idea2020.1终于发布了,它有多香相信小伙伴们已经有所耳闻。现在就拿出来分享给小伙伴们。   所需要的的东西放在这里了,同时里面也放了一个idea2020.1,小伙伴可以选择性的...

我喜欢你有用吗__
32分钟前
32
0
从企业微信机器人到小爱同学,用 Serverless 实现生活智能化!

通过定时触发器,可以简单快速地定制一个企业微信机器人。我们可以用它来实现喝水、吃饭提醒等小功能,还能实现定时推送新闻、天气,甚至是监控告警的小功能。 使用企业微信机器人 在企业微信...

腾讯云Serverless
35分钟前
32
0
socket编程基础,从了解到实现

java生下来一开始就是为了计算机之间的通信,因此这篇文章也将开始介绍一下java使用socket进行计算机之间的通信,在上一篇文章中已经对网络通信方面的基础知识进行了总结,这篇文章将通过代码...

虹越云霄
36分钟前
41
0
Spring Enable***功能

spring博大精深,衍生出了两大系列:spring boot 和sping cloud快速业务开发模式。 我们进行具体开发时,经常看到这样以Enable*开头的注解,如图 等等好多例子。。。框架自带的Enable* @En...

董广明
38分钟前
41
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部