文档章节

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

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

© 著作权归作者所有

共有 人打赏支持
乌龟壳
粉丝 111
博文 22
码字总数 13436
作品 0
深圳
程序员
高性能JavaScript模板引擎原理解析

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

李朝强
2013/07/29
0
0
推荐13款javascript模板引擎

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

李朝强
2013/07/29
0
1
【探秘ES6】系列专栏(四):模版字符串

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

一配
2015/10/27
0
0
一个精巧的Javascript Template引擎

基于MVC模式的web框架在渲染页面时,都会提供可以内嵌后端语言的模板引擎,用于使用动态数据生成页面。在某些场景下,无法使用后端的模板引擎,但又需要使用动态数据渲染页面内容,这时便可选...

con
2014/03/29
0
4
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5

没有更多内容

加载失败,请刷新页面

加载更多

Nginx 配置url 跳转

Step 1:前言 公司一个管理后台,每次访问要写很长的参数,想直接访问域名就去管理页面 Step 2:配置 location / { rewrite ^/$ http://pay-admin.sasha-lab.com/index.php?m=admin&c...

Linux_Anna
8分钟前
0
0
php7在FreeBSD系统下静态编译iconv,导致BUS ERROR (core dump)解决

bug页面: https://bugs.php.net/bug.php?id=72198 触发此bug需要很多条件: FreeBSD系统(10.0以上),Linux系统、MacOS下均无此问题 静态编译iconv扩展,动态iconv扩展也无此问题 系统安装了...

hell0cat
11分钟前
0
0
FireFox下载时文件名乱码问题解决

String filename = java.net.URLEncoder.encode(file.getName(), "UTF-8"); response.setHeader("Content-Disposition", "attachment;filename*=utf-8'zh_cn'" + filename);......

放飞E梦想O
19分钟前
0
0
Spring声明式事务不回滚问题

注解 @Transactional 声明事务 内部调用方法不会走代理方式调用,而是类内部的函数调用,有事务注解也不会开启事务 但是当A有事务调用B时,B会加入A事务中,使之为同一事务 A无事务 ,B有事务...

职业搬砖20年
20分钟前
0
0
高并发的“大杀器”:异步化、并行化

高并发的大杀器:异步化 同步和异步,阻塞和非阻塞 同步和异步,阻塞和非阻塞,这几个词已经是老生常谈,但是还是有很多同学分不清楚,以为同步肯定就是阻塞,异步肯定就是非阻塞,其实他们并...

微笑向暖wx
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部