一个不成熟的模板引擎思路
关于模板,我倒是用过了不少。最开始要数Java的JSP了,然后接触了PHP的smarty,再就是Python的jinja2, Django内置模板,现在刚开始看Nodejs,也发现了不少类似的模板引擎,ejs, jade等等吧。
模板带来的最直接的好处就是加速开发,前后端分离。除此之外,对于字符串的格式化同样是个比较好的应用。习惯了Python中
string = "hello {}".format("郭璞") # hello 郭璞
string = "hello {username}".format(username="郭璞") # hello 郭璞
这样简便的用法,突然来到nodejs中,没有了这类特性的原生支持,写起来打印语句就老是觉得很别扭,一点都不优雅。然后我就想自己做一个实现上述功能的工具函数,方便自己的使用。然后就想到了模板这一个方向,虽然想法还不够成熟,甚至是有点拙略,但是“灵(瞎)感(闹)”还是得记录一下不是。
Function对象
JavaScript中有这么一个神奇的对象,那就是Function。如果函数体符合语法要求,那么你就可以动态创建出一个自己的函数出来。下面来个简单的小例子。
无参模式
function create_function(){var func_body = "var time = new Date(); console.log('创建时间:'+time);";var func = new Function('', func_body);func();
}
create_function();
运行结果如下:
E:\Code\Nodejs\learn\my-work\string>node one.js
创建时间:Tue Jun 13 2017 15:40:15 GMT+0800 (中国标准时间)E:\Code\Nodejs\learn\my-work\string>
有参模式
刚才演示了一个无参数的情况,那么有参数的情况如何呢?
function create_function_with_parameters() {var param1 = "郭璞";var param2 = "辽宁大连";var func_body = "console.log('Hello '+param1+', welcome to '+param2+'!' );";var func = new Function('param1', 'param2', func_body);func(param1, param2);
}
create_function_with_parameters();
同样的运行结果如下:
E:\Code\Nodejs\learn\my-work\string>node one.js
Hello 郭璞, welcome to 辽宁大连!E:\Code\Nodejs\learn\my-work\string>
到这里,关于Function的内容就算是铺垫完成了。只需要了解这
正则
探究模板的真实原理,有些语言中是编译型的,有些是替换型的。但是不管是哪种类型,都离不开扣出变量关键字这个步骤。而这个过程用正则表达式基本上是最好的方法了。所以需要掌握一点相关的技巧。
如何表达?
在Nodejs中,使用正则表达式有两种形式:
- 字面量:
/pattern/flags
- RegExp:
new RegExp(pattern, flags)
关于正则表达式的具体的规则,鉴于篇幅很长,这里就不再赘述了。有兴趣的可以浏览下面的这篇文章。
http://www.cnblogs.com/chenmeng0818/p/6370819.html
需求获取
根据一开始的设想,目标是获取{{}}
和{%%}
这种语法下的变量名称,然后替换成对应的变量值。 因此可以写出如下的正则表达式:
var pattern1 = /{{([\s\S]+?)}}/gi;
// 或者
var pattern2 = /{%([\s\S]+?)%}/gi;
默认规则如下:
- 在
{{}}
中直接替换为变量名对应的值。 - 在
{%%}
中的则是可以添加到函数体的代码块,要保留起来。
简易实现
下面简单的对照着实现一下。
直接变量形式
function test1(){var tpl = "Hello {{visitorname}}, Welcome to {{worldname}}!";var data = {visitorname: "游客",worldname: "冰雹工作室"};var pattern = /{{([\s\S]+?)}}/gi;var result = tpl.replace(pattern, (match, tuple)=>{return data[tuple];});console.log("渲染后的数据为:\n", result);
}
实现结果:
E:\Code\Nodejs\learn\my-work\string>node one.js
渲染后的数据为:Hello 游客, Welcome to 冰雹工作室!E:\Code\Nodejs\learn\my-work\string>
对象形式
function test2(){var tpl = "I'm {{user.name}}, and I come from {{user.address}}";var user = {name: "郭璞", address: "辽宁大连"};console.log(user.name);var pattern = /{{([\s\S]+?)}}/gi;var result = tpl.replace(pattern, function(match, tuple, offset){return eval(''+tuple);});console.log(result);}
运行效果:
E:\Code\Nodejs\learn\my-work\string>node one.js
郭璞
I'm 郭璞, and I come from 辽宁大连E:\Code\Nodejs\learn\my-work\string>
混杂多参数实现
刚才实现了只有关键字的和有对象性质的参数的例子,但是实际中情况可能比这要复杂的多,比如混杂模式。接下来着手实现一下混杂模式下的替换策略。
function test3(){var tpl = "I am {} of {} years old, and I come from {user.address}.";var name = '郭璞';var index = 0;var paramindex = 0;// var parameters = [{name: '郭璞'}, {'age': 22}, {address: '辽宁大连'}];var parameters = ['郭璞', 22, {user: {address: '辽宁大连'}}];console.log(parameters[2]);var result = tpl.replace(/{([\s\S])*?}/gi, function(match, tuple, offset){console.log('match:', match);console.log('tuple: ', tuple);tpl = tpl.slice(index, offset);index = offset + match.length;paramindex += 1;var temp = parameters[paramindex-1];if(match.length > 2){// 使用tuple不能正确获取到标记中相关的变量名,故用match来代替.match = match.slice(1, match.length-1);return eval('parameters[paramindex-1].'+match);}else{return temp;}// return parameters[paramindex-1];});console.log(result);
}
运行结果如下:
E:\Code\Nodejs\learn\my-work\string>node one.js
{ user: { address: '辽宁大连' } }
match: {}
tuple: undefined
match: {}
tuple: undefined
match: {user.address}
tuple: s
******* s
I am 郭璞 of 22 years old, and I come from 辽宁大连.E:\Code\Nodejs\learn\my-work\string>
关于正则这块,大致的内容就是这样了。如果要想更简单的调用,只需要封装起来,用外部参数代替就好了。
当然,注意变量名的命名风格。
实战
废话连篇说了两个小节,还没到正式的模板制作。下面就整合一下刚才例子。模拟着实现一下好了。
(!完整)代码
来个不完整的代码,示意一下算了。
/*** 通过正则表达式和Function语法创建一个简单的模板引擎。*/const pattern = /{{([\s\S]+?)}}|{%([\s\S]+?)%}|$/img;function template(text, params, name) {// 声明最终要返回的解析好的文本串,也就是构造Function所需的函数体部分。var func_body = '';// 函数体里面最终效果是返回一个代表了解析完成的字符串的变量,因此要声明一个出来func_body += 'var parsedstr="";';func_body += 'parsedstr+="';// 设置一个定位器,每次更新偏移量,进行全文替换工作var index = 0;// 开始正则匹配,根据捕获到的元组进行剖析text.replace(pattern, function (matchedtext, interpolate, evaluate, offset) {// 匹配到正常的HTML文本,则直接添加到func_body中即可func_body += text.slice(index, offset);// 如果是evaluate类型的文本,则作为代码进行拼接if (evaluate) {func_body += '";' + evaluate + 'parsedstr+="';}// 匹配到interpolate类型的文本,则作为变量值进行替换if (interpolate) {func_body += '"+' + interpolate + '+"';}// 更新偏移量index,让程序向后移动index = offset + matchedtext.length;// 貌似返回值没什么用吧return matchedtext;});// 完成函数体的构建之后就可以调用Function的语法实现渲染函数的构建了func_body += '"; return parsedstr;';return new Function('obj', 'name', func_body)(params, name);
}function test() {var obj = [{ text: '张三' },{ text: '李四' },{ text: '王五' },{ text: '赵六' },{ text: '韩七' },{ text: '王八' }];var name = '郭璞';var fs = require('fs');// var rawtext = fs.readFileSync('index.html').toString('utf8');var rawtext = '<ul>{%for(var i in obj){%}<li>{{ obj[i].text }}</li><br>{%}%}</ul>';console.log("源文件:", rawtext);var result = template(rawtext, obj);console.log("渲染后文件:", result, name);fs.writeFileSync('rendered.html', result);console.log('渲染完毕,请查看rendered.html文件')
}test();
同级目录下生成的文件内容为:
<ul><li>张三</li><br><li>李四</li><br><li>王五</li><br><li>赵六</li><br><li>韩七</li><br><li>王八</li><br></ul>
感觉效果还行,但是这里面参数太固定化了,实际封装的时候还需要酌情指定,不然这东西也就没什么卵用。
总结
要是论实用性价值的话,这个不成熟的模板实现思路毫无价值。但是对于我而言,用来格式化字符串倒是个不错的选择,估计我会把这个小思路封装成一个小小的模块,详情可以关注我的GitHub的这个链接。
https://github.com/guoruibiao/have-fun-in-node
一个不成熟的模板引擎思路相关推荐
- 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- 自己动手写一个简单的php模板引擎
模板引擎中最核心的思想是:将模板中的变量编译为php的变量进行输出. 例如:demo.tpl {$data} {$title} 那么模板引擎就要将{$data} {$title} 编译为 <?p ...
- 一个简单的PHP模板引擎
PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...
- 正则表达式 php 模板,PHP中正则表达式回顾(4)--编写一个非常简单而且山寨的smarty模板引擎...
PHP的正则表达式今天就结束了,遥想几年前初次接触的时候,感觉这玩意真心玩不转啊,而时至今日,感觉这也没有什么难以理解的,确实还是有很大进步的,尤其是对smarty模板引擎有了一个更为清晰的认识.正则 ...
- 由浅入深:自己动手开发模板引擎——置换型模板引擎(三)
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
- 由浅入深:自己动手开发模板引擎——置换型模板引擎(二)
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
- Pluto - iOS 上一个高性能的排版渲染引擎
Pluto 是 iOS 上的一个排版渲染引擎,通过 JSON/JS 文件可以很方便地描述界面元素,开发效率很高,并且在流畅度,内存等方便有保证.pluto.oa.com 上有更多详细资料. Qzone ...
- 使用 .NET Core模板引擎创建自定义的模板和项目
本文要点 .NET CLI 包含了一个模板引擎,它可以直接利用命令行创建新项目和项目项.这就是"dotnet new"命令. 默认模板集涵盖了默认控制台和基于 ASP.NET 的应 ...
- php smarty 原理,php模板原理PHP模板引擎smarty模板原理浅谈
mvc是开发中的一个伟大的思想,使得开发代码有了更加清晰的层次,让代码分为了三层各施其职.无论是对代码的编写以及后期的阅读和维护,都提供了很大的便利. 我们在php开发中,视图层view是不允许有ph ...
最新文章
- 硬件delay评估表
- php simplexml 遍历,php下使用SimpleXML 处理XML 文件
- 003.DNS主从正反解析部署
- Python序列循环移位的3种方法
- php中向数组添加值,如何使用array_push向数组添加值和键 - php
- obendclean php命令,ob_end_clean
- asc怎么用 linux zip_File Roller/Unzip 解压中文 Zip 文件名乱码
- C# RSA2048 公钥加密,私钥解密
- Vue/ElementUI上传文件检验
- 三极管共射放大电路的放大倍数怎么设计?
- HTML5:Animate cc交互之“影片剪辑”实现“按钮”功能
- VR全景制作方法教程完整版
- 今日,华为重磅发布6大创新产品及服务!
- 笔试面试常见逻辑题及答案
- Docker六大优势,云中部署模式、以及视频demo
- 戴尔笔记本怎么安装统信uos系统?戴尔笔记本安装统信uos+win双系统
- php fpm 重启命令,php-fpm怎么重新启动
- 服务器内存不够了?看这里!
- 关于NS-2仿真中移动节点的设置
- word2vec 中的数学原理详解(六)若干源码细节