文档章节

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

乌龟壳
 乌龟壳
发布于 2016/12/06 00:54
字数 474
阅读 55
收藏 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秒多。

© 著作权归作者所有

共有 人打赏支持
乌龟壳
粉丝 112
博文 22
码字总数 13436
作品 0
深圳
程序员
私信 提问
10 个强大的JavaScript / jQuery 模板引擎推荐

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

鉴客
2012/04/12
5.7K
12
利用V8封装ctemplate,期望让模版加速日常开发

通过几天紧张有序的资料整理,终于动手把ctemplate用V8进行了JS式的封装,现在JS也能用上高效的模版系统了,先看使用范例: 运行效果可 下载,解压后,运行test.bat。如果需要打算修改或者再...

天界王者
2012/06/05
715
0
【探秘ES6】系列专栏(四):模版字符串

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

一配
2015/10/27
0
0
高性能JavaScript模板引擎原理解析

本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理,包括新一代 javascript 模板引擎 artTemplate 的特性实现原理,欢迎共同探讨。 artTemplate 介绍 artTemplate 是新一代 ja...

李朝强
2013/07/29
0
0
13 款 JavaScript 模板引擎

JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

红薯
2012/04/15
16.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

关于ElasticSearch的使用过程遇到的问题

由于作者从官网下载了ES5.6.10的安装包,解压之后就开始运行ES,前面一切正常。 后面某个查询条件失效。 解决: 1.先试了把单个查询条件撤离出来,当成一个Test来跑,发现还是获取不到值,表...

DoLo-lty
14分钟前
0
0
sed 替换文本内得路径字符等等

1. 句子 sed -i 's%/opt/apache-maven-3.5.3/conf/settings.xml%/data/opt/apache-maven-3.5.3/conf/settings.xml%g' ./*/config.xml 2. 解释 sed linux 一个文件流式处理的工具 2.1 -i 在当......

Aruforce
15分钟前
0
0
mysql_索引

索引类型 哈希表 有序数组 搜索树 MySQL索引 B-树 B+树 innodb的索引 索引维护 关于自增主键的使用 参考 极客时间《mysql实战45讲》

grace_233
15分钟前
0
0
“入乡随俗,服务为主” 发明者量化兼容麦语言啦!

5年时光 我们裹挟前行。发明者量化从筚路蓝缕到步履蹒跚,从以“区块链资产交易”为阵地,再到以“内外盘商品期货”为依托。再到今天全面兼容“麦语言”。每一步,我们始终都在为建立一个优秀...

酒逢知己千杯少
16分钟前
0
0
session深入探讨

简介 session,会话,其实是一个容易让人误解的词。它总跟web系统的会话挂钩,利用session,javaweb项目实现了登录状态的控制。坊间流传,关闭浏览器,就是关闭了web系统的会话。其实浏览器对...

千里明月
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部