关于模板,我倒是用过了不少。最开始要数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)
关于正则表达式的具体的规则,鉴于篇幅很长,这里就不再赘述了。有兴趣的可以浏览下面的这篇文章。
https://www.jb51.net/article/39623.htm"htmlcode">
var pattern1 = /{{([\s\S]+"htmlcode">function test1(){ var tpl = "Hello {{visitorname}}, Welcome to {{worldname}}!"; var data = { visitorname: "游客", worldname: "冰雹工作室" }; var pattern = /{{([\s\S]+"渲染后的数据为:\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]+"htmlcode">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])*"htmlcode">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]+"";'; 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>感觉效果还行,但是这里面参数太固定化了,实际封装的时候还需要酌情指定,不然这东西也就没什么卵用。
总结
要是论实用性价值的话,这个不成熟的模板实现思路毫无价值。但是对于我而言,用来格式化字符串倒是个不错的选择,估计我会把这个小思路封装成一个小小的模块,详情https://github.com/guoruibiao/have-fun-in-node
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]