实现一个简单的JavaScript模板引擎_function template(string, data) { // 你的代码实现 } cons-程序员宅基地

技术标签： js

var TemplateEngine = function(tpl, data) {
    // magic here ...
}
var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
console.log(TemplateEngine(template, {
    name: "Krasimir",
    age: 29
}));复制代码

现在我们要实现TemplateEngine函数, 由上可知, 该函数的两个参数为模板及数据. 执行上述代码后会出现以下结果:

<p>Hello, my name is Krasimir. I'm 29 years old.</p>复制代码

首先我们必须要获取模板中的动态变化部分, 之后将用二个参数中的真实数据替换动态变化部分的内容, 可以使用正则表达式实现.

var re = /<%([^%>]+)?%>/g;复制代码

上面的表达式会提取所有以<%为开头, %>为结尾的部分内容, 末尾的g(global)表示匹配所有项. 然后使用RegExp.prototype.exec()方法, 将所有匹配的字符串存进一个数组中.

var re = /<%([^%>]+)?%>/g;
var match = re.exec(tpl);复制代码

输出match得到这样的结果:

[
    "<%name%>",
    " name ", 
    index: 21,
    input: 
    "<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>"
]复制代码

我们提取出了数据, 但是只得到一个数组元素, 我们需要处理的是所有匹配项, 因此使用while循环实现:

var re = /<%([^%>]+)?%>/g, match;
while(match = re.exec(tpl)) {
    console.log(match);
}复制代码

执行上述代码之后会发现<%name%>和<%age%>都被提取出来了.

接下来要用真实的数据取代占位符. 最简单的方式是使用String.prototype.replace()方法实现:

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

对于文章开头的例子, 因为只是简单的对象, 使用当前的方式(data["property"])就能够完成任务, 但是实际上会遇到更复杂的多层嵌套对象, 比如:

{
    name: "Krasimir Tsonev",
    pr

本文链接：https://blog.csdn.net/weixin_37722222/article/details/101101775

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Python 玩出花儿了！一文教你用 Python 制作吃豆人游戏！ | 附代码-程序员宅基地

文章浏览阅读7.2k次，点赞19次，收藏70次。作者 | 李秋键责编 | Carol封图 | CSDN 下载自视觉中国近几年来Python语言得到了快速发展，而Pygame作为Python开发应用和游戏必备的库更是展现了Python的..._python吃豆人实验原理

炸弹人（枚举解决）-程序员宅基地

文章浏览阅读327次。题目描述：现有关卡：游戏者只有一枚炸弹，且炸弹可以杀死杀伤范围内所有敌人。请问炸弹放在哪个位置，可以消灭最多的敌人。题目的抽象化墙用#表示，敌人用G表示，空地用.表示上代码#include<bits/stdc++.h>using namespace std;int main(){ char a[20][21];//建立一个二维字符数组，表示x行y列 i...

PhpStorm中如何使用database工具_phpstorm database显示字段备注-程序员宅基地

文章浏览阅读529次。http://blog.csdn.net/knight_quan/article/details/519830291.简介：PhpStorm是一个轻量级且便捷的PHP IDE，其提供的智能代码补全，快速导航以及即时错误检查等功能大大提高了编码效率。它以其独特的开发便利性，短时间内赢得了大量PHPer的青睐。MySQL是一个关系_phpstorm database显示字段备注

JavaScript DOM的增、删操作，并实时显示到表格中（JS代码含详细注释）_js新增记录,查找网站,表格显示-程序员宅基地

文章浏览阅读353次。JavaScript DOM的增、删操作，并实时显示到表格中一、说明二、实现代码三、一点备注一、说明给所有的a标签绑定事件判断点击的del属于哪一行数据删除当前行的tr节点获取添加表中的所有input数据添加tr和td节点向新建的td节点中添加数据（数据来源与4.）给新建的行中的a标签绑定事件二、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> _js新增记录,查找网站,表格显示

苏州大学2008年复试上机真题_2008苏州大学837复试机试c语言-程序员宅基地

文章浏览阅读225次。题目描述:文件中按文本方式存放了一段其他文章，其中有若干长度小于15的英文单词，单词之间用空格分开，无其他符号。顺序读取这段文章的不同的单词（大小写敏感），同时在读取的过程中排除所有的单词THE以及变形，即这些单词不能出现在读取的结果中。将读取的所有单词的首字母转大写后，输出到文件中，每个单词一行。代码：..._2008苏州大学837复试机试c语言

vscode 搭建C语言开发环境_vscode搭建c语言开发环境-程序员宅基地

文章浏览阅读7k次，点赞6次，收藏46次。vscode 搭建C语言开发环境1. 安装C编译器（MinGW-W64 GCC）C编译器（MinGW-W64 GCC）的下载地址为：https://sourceforge.net/projects/mingw-w64/点击下图中的Download即可下载：下载完成后将压缩包解压到C盘，如下图所示：在环境变量PATH中新增两个变量：“C:\mingw64\bin” /“C:\mingw64\include“1、右键此电脑，点击属性2、点击高级属性3、点击高级，再点击环境变量4、点击P_vscode搭建c语言开发环境

随便推点

51按键外部中断控制流水灯_case 0xfe: return 0; case 0xfd: return 1; case 0xf-程序员宅基地

文章浏览阅读2.1w次，点赞28次，收藏218次。实验二外部按键输入一、实验目的1、了解单片机检测口方法2、了解单片机外部中断原理3、了解按键输入原理二、实验内容1、完成按键扫描控制流水灯2、完成按键外部中断控制流水灯三、实验原理四、实验电路与程序1、软件实验一：按键扫描控制流水灯1）实验要求：读取四个按键的输入，检测到按下后控制灯流动一段时间，然后继续读取按键输入。2）实验目的：1. 掌握按键消抖方法；2. 掌握单片机端口检测方法3）实验说明：通过本实验，可以了解单片机读取IO口电平的方法，同时也可以了解单片机编程，调试方_case 0xfe: return 0; case 0xfd: return 1; case 0xfb: return 2; case 0xf7