浅谈模板引擎原理及制作

概念:

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档

使用原因:

前端模板引擎出现之前,在需要用js渲染页面的情况下,我们一般会通过js将数据和生成结构绑定。例如:
var html = "";
for(var i =0;i<data.length;i++){
html+="<li>"+data[i]+"</li>"
}
一旦业务复杂起来,或者多人维护的情况下,几乎会失控。而且如果需要拼接的 HTML 代码里有很多引号的话(比如有大量的 href 属性,src 属性),那么就非常容易出错了。

动手写一个引擎:

参考http://blog.jobbole.com/56689/
一:从简单的说起(字符串的替换):
比如:

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
data = { name: "Krasimir", age: 29 }

最终转换为

<p>Hello, my name is Krasimir . I\'m 29 years old.</p>

步骤
1.使用正则查找所有<%属性名%>片段

var re = /<%([^%>]+)?%>/g;//
这句正则表达式会捕获所有以<%开头,以%>结尾的片段;
[^%>] :^表示非,意为片段中不包含%或者不包含>的部分;
()为捕获组;

2.将每次得到片段替换为数据中的属性值;

这里使用exec();取得
[0:"<%name%>"//与正则表达式相匹配的文本
1:"name"//捕获组里面的内容
index:21//匹配文本的每次起始位置
input:"<p>Hello, my name is frank. I'm <%age%> years old.</p>"//被检索的字符串 string
]

不确定次数的循环操作使用while()

while(match = regex.exec(tpl)) {
      tpl = tpl.replace(match[0], data[match[1]])
          //match[0 ] :循环第一次得出<%name%> ;循环第二次得出<%age%>
          //data[match[1]:循环第一次得出 data['name'] ; 循环第二次得出data['age']
       }

整体代码如下:

var TemplateEngine = function(tpl, data) {
  var regex = /<%([^%>]+)?%>/g; 
        while(match = regex.exec(tpl)) {
            tpl = tpl.replace(match[0], data[match[1]])
        }
        return tpl;
}
TemplateEngine(template, data)

二:通过new Function();将字符转换为js代码
上面的例子我们以data[“property”]的方式使用了一个简单对象来传递数据,但是实际情况下我们很可能需要更复杂的嵌套对象,如果将data改成如下。

eg:data={
    name: "Krasimir Tsonev",
    profile: { age: 29 }
}

在模板中使用<%profile.age%>的话,代码会被替换成data[‘profile.age’],结果是undefined。这样我们就不能简单地用replace函数,而是要用别的方法。如果能够在<%和%>之间直接使用Javascript代码就最好了。
var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
最终将template转换成js代码为
"<p>Hello, my name is "
+ this.name+
". I\'m "
+this.profile.age+
" years old.</p>"
//this.属性名:为这个方法作用域下数据的属性值;
//****注:代码特点为,字符串加引号,非字符即代码运行部分没有引号!!!****

步骤
一、准备前提:new Function("字符串"):

var fun = new Function("a","console.log(a)"); //可以执行字符串内的代码
    fun(1)//1;

此代码相当于
var fun = function(a){
  console.log(a)
}
fun(1)

由此将上述模板转为

var TemplateEngine= function(data){
  return "<p>Hello, my name is "+ this.name+ ". I\'m " +this.profile.age+" years old.</p>"
}
var data={
    name: "Krasimir Tsonev",
    profile: { age: 29 }
}
TemplateEngine.apply(data)//在data的作用域下使用方法TemplateEngine;

最终转为new Function("字符串")的写法为;

var template=  "<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>"
var result = new Function(template).apply(data);

二、正式开始:模板用正则替换为js代码:
var template= '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>'
希望得到模板的js格式为

"<p>Hello, my name is " //字符
+ this.name+//代码
". I\'m "
+this.profile.age+
" years old.</p>"

js格式实现之前的字符效果为(后期通过new Function()转成js代码)

var arr=[];
arr.push("<p>Hello, my name is ");
arr.push(this.name);
arr.push(". I'm ");
arr.push(this.profile.age);
arr.push(" years old.</p>");
return arr.join("")

思路:需要在上述js格式的每行打个隔断,即碰到<%...%>,做个隔断,同时判断若为字符串加引号,,若为js代码直接输出,以下代码用变量code接住所有隔断,用方法add()实现判断js并推入隔断。与此同时需要考虑模板中的引号需要转义,以免影响js效果。
整体代码如下:

  function TemplateEngine(tpl,data) {
       var reg = /<%([^%>]+)?%>/g;
       var code = 'var arr=[];\n', 
            cur=0;      //游标,用来记录查找的位置;
       while(match = reg.exec(tpl)){
           add(tpl.slice(cur,match['index']));   //eg:第一次循环加入arr.push("<p>Hello, my name is ");
           add(match[1],true);//eg:第一次循环加入arr.push(this.name);
           cur=match['index']+match[0].length; // 记录下一次循环,需要截取的起始位置
       }
      //至此截取到最后一个<%this.profile.age%> 
       add(tpl.slice(cur)); // 截取剩余模板剩余部分
       code+="return arr.join(\"\")"; //  由于code在new Function()中,因此需要返回运行代码。
        function add(line ,js) {
            js?code+="arr.push("+line+");\n":
            code+="arr.push(\""+line.replace('\"','\\"')+"\");\n";
        }
        return new Function(code).apply(data);
    }
 var template = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
 var data = {
        name: "lili",
        profile: { age: 30 }
    };
console.log(TemplateEngine(template, data));

模板引擎接近完成了,不过还有一点,我们需要支持更多复杂的语句,比如条件判断和循环。我们接着上面的例子继续写。

var template = 
'My skills:' + 
'<%for(var index in this.skills) {%>' + 
'<a href="#"><%this.skills[index]%></a>' +
'<%}%>';
console.log(TemplateEngine(template, {
    skills: ["js", "html", "css"]
}));

沿用上一个方法,这里会产生一个异常,Uncaught SyntaxError: Unexpected token for。如果我们调试一下,把code变量打印出来,我们就能发现问题所在。

var r=[];
r.push("My skills:");
r.push(for(var index in this.skills) {);
r.push("<a href=\"\">");
r.push(this.skills[index]);
r.push("</a>");
r.push(});
r.push("");
return r.join("");

带有for循环的那一行不应该被直接放到数组里面,而是应该作为脚本的一部分直接运行。所以我们在把内容添加到code变量之前还要多做一个判断。

var re = /<%([^%>]+)?%>/g,
    reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
    code = 'var r=[];\n',
    cursor = 0;
var add = function(line, js) {
    js? code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n' :
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}

这里我们新增加了一个正则表达式。它会判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去,否则就添加到数组中去。运行结果如下:

var r=[];
    r.push("My skills:");
for(var index in this.skills) {
    r.push("<a href=\"#\">");
    r.push(this.skills[index]);
    r.push("</a>");
}
r.push("");
return r.join("");

最后一个改进可以使我们的模板引擎更为强大。我们可以直接在模板中使用复杂逻辑,例如:

 var songs =[
        {name:'刚刚好', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'最佳歌手', singer:'许嵩', url:'http://music.163.com/xxx'},
        {name:'初学者', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'绅士', singer:'薛之谦', url:'http://music.163.com/xxx'},
        {name:'我们', singer:'陈伟霆', url:'http://music.163.com/xxx'},
        {name:'画风', singer:'后弦', url:'http://music.163.com/xxx'},
        {name:'We Are One', singer:'郁可唯', url:'http://music.163.com/xxx'}
    ];
    var html =
        '<div class="song-list">'+
        '  <h1>热歌榜</h1>'+
        '  <ol>'+
        '<%for(var i=0; i<this.songs.length;i++){%>'+
        '<li><%this.songs[i].name%> - <%this.songs[i].singer%></li>'+
        '<%}%>'+
        '  </ol>'+
        '</div>';

最终版本代码为

    var TemplateEngine = function(html,options) {
        var re = /<%([^%>]+)?%>/g,
            reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
            code = 'var Arr=[];\n',
            cursor = 0;
        var add = function(line, js) {
            js? (code += line.match(reExp) ? line + '\n' : 'Arr.push(' + line + ');\n') :
                (code += line != '' ? 'Arr.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
            return add;
        };
        while(match = re.exec(html)) {
            add(html.slice(cursor, match.index));
            add(match[1], true);
            cursor = match.index + match[0].length;
        }
        add(html.substr(cursor, html.length - cursor));
        code += "console.log(this);\n";
        code += 'return Arr.join("");';
        return new Function (code.replace(/[\r\t\n]/g, '')).apply(null,songs);//此处需注意变量songs不是对象,需要将apply(null,songs)加null,变为全局作用域;
    };
 var results =TemplateEngine (html,songs);
document.body.innerHTML = results;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 【HELLO小程序导读】:AbsurdJS 作者写的一篇教程,一步步教你怎样用 Javascript 实现一个纯客...
    c14328d5898b阅读 450评论 0 3
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,581评论 18 399
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 2,449评论 1 37
  • 前不久,社长去看了一场歌唱比赛。作为选手之一的朋友给了我四张票,于是我拉上三个好(chigua)朋(qun)友(z...
    阿布杂谈阅读 141评论 0 0