一个不成熟的模板引擎思路

关于模板,我倒是用过了不少。最开始要数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

时间: 2024-07-31 22:12:01

一个不成熟的模板引擎思路的相关文章

JavaScript模板引擎开发实例

随着Nodejs的流行,JavaScript在前端和后端都开始流行起来.有许多成熟的JavaScript模板引擎,例如Swig,既可以用在后端,又可以用在前端. 不过很多时候,前端模板仅仅需要简单地创建一个HTML片段,用Swig这种全功能模板有点大材小用.我们来尝试自己编写一个简单的前端模板引擎,实际上并不复杂. 在编写前端模板引擎代码之前,我们应该想好如何来调用它,即这个模板引擎的接口应该是什么样的.我们希望这样调用它: // 创建一个模板引擎: var tpl = new Template

超越模板引擎

模板 总体来说,模板引擎是一个"好东西" 作为一个PHP/Perl的程序员,许多模板引擎(fastTemplate, Smarty, Perl的 HTML::Template)的用户,以及我自己的(bTemplate [1] 的作者),我讲这句话很多次了. 然而,在同事进行了长时间的讨论之后,我确信了大量的模板引擎(包括我自己写的)根本是错误的. 我想唯一的例外是Smarty [2],虽然我认为它太庞大了,并且考虑到这篇文章的其余部分相当的没有观点.然而,就你为什么选择Smarty(或

TinyTemplate模板引擎火热出炉,正式开源了~~~

序言 本来是没有自己写一个模板引擎的计划的,因为按我的理解,一直认为这种"语言"级的引擎,难度是非常大的.总感觉自己的水平不够,因此不敢有这个念头.直到大量使用Velocty的时候,碰到velocty诸多不尽如人意的地方,但是又无能为力,退回到JSP吧,又心不有甘.于是就期望着寻找一种语法结构接近velocty,但是又没有Velocity这些不方便之处的模板语言.于是进到一个模板语言群,一群大佬们个个至少是一个模板语言的作者,于是作者在里面表达了自己的期望,大佬们都介绍了自己的模板引擎

JAVA velocity模板引擎使用实例_JSP编程

velocity使用1.7版本. 在win7下使用intelliJ IDEA建立一基于tomcat的web app项目,命名为todo_web,设置path为/todo,导入velocity相关jar包.只导入velocity-1.7.jar这个包可能会报错,根据提示再导入velocity自带的其他包. 项目结构如下: 测试Tomcat index.jsp内容如下: 复制代码 代码如下: <%-- Created by IntelliJ IDEA. --%><%@ page conten

简单的自定义php模板引擎_php实例

模板引擎的思想是来源于MVC(Model View Controller)模型,即模型层.视图层.控制器层. 在Web端,模型层为数据库的操作:视图层就是模板,也就是Web前端:Controller就是PHP对数据和请求的各种操作.模板引擎就是为了将视图层和其他层分离开来,使php代码和html代码不会混杂在一起.因为当php代码和html代码混杂在一起时,将使代码的可读性变差,并且代码后期的维护会变得很困难.  大部分的模板引擎原理都差不多,核心就是利用正则表达式解析模板,将约定好的特定的标识

JavaScript模板引擎简介

国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私募机构九鼎控股打造,九鼎投资是在全国股份转让系统挂牌的公众公司,股票代码为430719,为"中国PE第一股",市值超1000亿元.    ----------------------------------------------------------------------------

10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易.  本文整理了10 款基于JavaScript和jQuery的模板引擎,希望能对你的开发工作带来一些帮助.  1. NANO  最简单的jQuery模板引擎,完美实现对JSON的解析.  源码 / 演示  2. The "template" binding  该工具通过渲染模板将相关联的DOM元

简单的自定义php模板引擎

模板引擎的思想是来源于MVC(Model View Controller)模型,即模型层.视图层.控制器层. 在Web端,模型层为数据库的操作:视图层就是模板,也就是Web前端:Controller就是PHP对数据和请求的各种操作.模板引擎就是为了将视图层和其他层分离开来,使php代码和html代码不会混杂在一起.因为当php代码和html代码混杂在一起时,将使代码的可读性变差,并且代码后期的维护会变得很困难. 大部分的模板引擎原理都差不多,核心就是利用正则表达式解析模板,将约定好的特定的标识语

说说如何用JavaScript实现一个模板引擎

前言 不知不觉就很长时间没造过什么轮子了,以前一直想自己实现一个模板引擎,只是没付诸于行动,最近终于在业余时间里抽了点时间写了一下.因为我们的项目大部分用的是 swig 或者 nunjucks ,于是就想实现一个类似的模板引擎. 至于为什么要做这么一个东西?基本上每一个做前端的人都会有自己的一个框架梦,而一个成熟的前端框架,模板编译能力就是其中很重要的一环,虽然目前市面上的大部分框架 vue.angular 这些都是属于 dom base 的,而 swig nunjucks ejs这些都是属于