V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
TomorJM
V2EX  ›  程序员

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

  •  
  •   TomorJM · 2018-03-24 10:53:25 +08:00 · 2239 次点击
    这是一个创建于 2196 天前的主题,其中的信息可能已经有所发展或是发生改变。

    功能描述

    想输出

    我叫 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
        }
    }
    
    7 条回复    2018-03-25 11:58:01 +08:00
    lihongjie0209
        1
    lihongjie0209  
       2018-03-24 11:14:57 +08:00
    这种功能后端模版很简单, 比如 jsp, 前端就不知道了
    daimazha
        2
    daimazha  
       2018-03-24 11:24:04 +08:00
    TomorJM
        3
    TomorJM  
    OP
       2018-03-24 11:32:24 +08:00
    问题简化为:
    TomorJM
        4
    TomorJM  
    OP
       2018-03-24 11:32:57 +08:00
    输入一段模板和 json, 输出处理后的结果
    deepred
        5
    deepred  
       2018-03-24 13:09:35 +08:00
    最简单的模板引擎原理就是利用正则把占位符用 json 数据替换
    qiayue
        6
    qiayue  
       2018-03-24 13:40:37 +08:00
    正则找出所有的%s,按顺序替换
    xiangyuecn
        7
    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;
    })
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3046 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:49 · PVG 20:49 · LAX 05:49 · JFK 08:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.