模板设计与实现思路(JSON)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2439 天前的主题，其中的信息可能已经有所发展或是发生改变。

功能描述

想输出

我叫 Bob,我今年 20 岁了,我喜欢吃苹果。

如何通过 JSON 和模板来输出这句话, 假如(我说的假如)模板如下:

template{我叫%s,我今年%s 岁了,我喜欢吃%s。}, key{{}.person.name, {}.person.age, {}.fruit[0].name}

{
    "fruit": [
        {
            "name": "apple",
            "sweet": 1
        },
        {
            "name": "banana",
            "sweet": 0
        }
    ],
    "person": {
        "name": "Bob",
        "age": 20
    }
}

name

模板

JSON

fruit

7 条回复 • 2018-03-25 11:58:01 +08:00

lihongjie0209

2018-03-24 11:14:57 +08:00

这种功能后端模版很简单, 比如 jsp, 前端就不知道了

daimazha

2018-03-24 11:24:04 +08:00

https://www.cnblogs.com/shiyou00/p/6841801.html

TomorJM

2018-03-24 11:32:24 +08:00

问题简化为:

TomorJM

2018-03-24 11:32:57 +08:00

输入一段模板和 json, 输出处理后的结果

deepred

2018-03-24 13:09:35 +08:00

最简单的模板引擎原理就是利用正则把占位符用 json 数据替换

qiayue

2018-03-24 13:40:37 +08:00

正则找出所有的%s，按顺序替换

xiangyuecn

2018-03-25 11:58:01 +08:00

核心还不是简单的解析替换

写一个 js 简单的实现：

```
template="我叫{person.name},我今年{person.age}岁了,我喜欢吃{fruit[0].name}";
json={"fruit":[{"name":"apple","sweet":1},{"name":"banana","sweet":0}],"person":{"name":"Bob","age":20}};

template.replace(/{(.+?)}/g,function(a,b){
var res="";
try{
var res=eval('json.'+b)||"";//核心逻辑，语法解析，js 实现起来比较简单粗暴，前提模板是安全的
}catch(e){console.error(e)}

//稍微处理一下，数据是不安全的
res=(res==null?"":res+"").replace(/[<"'\{&]/g,function(a){return "&#"+a.charCodeAt(0)+";"});
return res;
})
```