爱意满满的作品展示区。
50vip

[激灵] 可能是世界上最小的 字符串模板库 了~

  •  2
     
  •   50vip · Dec 18, 2019 · 5552 views
    This topic created in 2364 days ago, the information mentioned may be changed or developed.

    仓库地址https://github.com/hustcc/tplv 请勿用于生产环境,写本地工具之类的可以试试。

    要什么仓库地址,就下面 8 行代码。

    /**
     * nano tpl library
     * @param template
     * @param data
     */
    export default function(template: string, data: object): string {
      const ks = Object.keys(data);
      const vs = ks.map((k: any) => data[k]);
    
      const t = `return \`${template}\``;
      const f = new Function(...ks, t);
    
      return f(...vs);
    }
    

    模板语法就是 ES6 String template 的语法。

    import render from 'tplv';
    
    const template = '${ name }, ${value}(${percent} | Top ${array[2]})';
    
    const data = {
      name: 'Hangzhou',
      value: 1200,
      percent: '13%',
      array: [1, 2, 3, 4]
    };
    
    render(template, data)); // will got `Hangzhou, 1200(13% | Top 3)`
    
    19 replies    2019-12-20 13:09:47 +08:00
    doublleft
        1
    doublleft  
       Dec 18, 2019
    挺好玩的,可以做个 benchmark
    fliu2476
        2
    fliu2476  
       Dec 18, 2019 via iPhone
    有点意思
    50vip
        3
    50vip  
    OP
       Dec 18, 2019
    @doublleft benchmark 如果在 new Function 哪里做一个 cache,肯定是无敌的。否则估计是中上等吧~
    wenzichel
        4
    wenzichel  
       Dec 18, 2019
    之前保存着一份用正则实现的,应该更简洁一些,不过效率上没有比较哪个更好,而且不能像你这个取数组或者 json 格式里的值

    ```javascript
    const render = function(template, data) {
    return template.replace(/\${(.+?)}/g, ($1, $2) => {
    const key = $2.trim();
    if (data.hasOwnProperty(key)) {
    return data[key];
    }
    return $1;
    })
    }
    ```
    50vip
        5
    50vip  
    OP
       Dec 18, 2019
    @wenzichel 正则实现,还有一个就是要去学习语法,tplv 的语法就是 es6 string 模板的语法。
    zrt
        6
    zrt  
       Dec 18, 2019
    will got ?
    50vip
        7
    50vip  
    OP
       Dec 18, 2019 via iPhone
    @zrt 感觉我英语能力着急…

    xxx will be got

    will get xx

    来 pr😂
    optional
        8
    optional  
       Dec 18, 2019
    至少套个 vm2 吧,,,
    50vip
        9
    50vip  
    OP
       Dec 18, 2019
    @optional 什么意思~
    xiri
        10
    xiri  
       Dec 18, 2019
    最后一句
    render(template, data));
    是多打了一个括号吗
    50vip
        11
    50vip  
    OP
       Dec 18, 2019
    @xiri o,确实是的~
    myqoo
        12
    myqoo  
       Dec 19, 2019
    @50vip 有个黑科技可以不用 eval/Function 也能生成高性能模板,并且生成速度更快。而且不受 csp unsafa-eval 影响,小程序里也可以用。
    50vip
        13
    50vip  
    OP
       Dec 19, 2019
    @myqoo 你到是说啊~^_^
    myqoo
        14
    myqoo  
       Dec 19, 2019
    @myqoo 原理有点复杂,几行代码实现不了,几句话也说不清。大致思路:函数柯里化。返回预制的闭包。
    50vip
        15
    50vip  
    OP
       Dec 20, 2019 via iPhone
    @myqoo 不信能做到😏
    doublleft
        16
    doublleft  
       Dec 20, 2019
    @50vip #3 new Function 做个闭包 看看能不能缓存函数
    forbreak
        17
    forbreak  
       Dec 20, 2019
    new Function 和 eval 那个效率高呢?我之前也用过类似的方式来解析模板,使用的 eval 处理的。
    50vip
        18
    50vip  
    OP
       Dec 20, 2019
    @doublleft 加个全局缓存,又感觉会产生内存问题,最好是一个 lru 缓存,但是这样,缓存代码都比模板代码多了,哈哈~好囧~
    50vip
        19
    50vip  
    OP
       Dec 20, 2019
    @forbreak 可以 benchmark 试试,应该差不太多吧。eval 稍微快一点。https://atool.vip/#/perf

    ![image.png]( https://i.loli.net/2019/12/20/apRzE7ZcXuDLsmj.png)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1163 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 18:24 · PVG 02:24 · LAX 11:24 · JFK 14:24
    ♥ Do have faith in what you're doing.