问一下前端模板引擎实现的问题？

Question

//模板
<div>{{ name + sex + 'hello!' }}</div>
//js
data: {name: 'joker', sex: 'male'}

现在要求用一个方法tmpl(str, data),得到结果'jokermalehello!',怎么实现tmpl这个函数，谢谢？

Answer 1

正好我也在研究这个 可以看下之前别人写的一篇文章 里面有你想要的https://segmentfault.com/a/11...

Answer 2

var tpl = `<div>{{ name + sex + 'hello!' }}</div>`;
var data = {name: 'joker', sex: 'male'};

var tmpl = function(tpl, data) {
    return tpl.replace(/\{\{(.*)\}\}/g, function(match, p1) {
        // p1: ` name + sex + 'hello!' `
        return p1.split(/[\s+]+/)
            //split result: ["", "name", "sex", "'hello!", ""]
            .map(item => {
                if (!/['"]/.test(item)) {
                    // when item = "name", "sex"
                    return data[item] || ''
                } else if (item) {
                    // when item = "'hello!"
                    return item.replace(/['"]/g,'')
                }
                return item
        }).join('')
    })
}

console.log(tmpl(tpl, data)); // output: <div>jokermalehello!</div>

Answer 3

laytpl 这个模板引擎刚好可以实现你的需求
不过它默认要求模板参数前面加d

<div>{{ d.name + d.sex + 'hello!' }}</div>

---

给 laytpl 增加参数解构功能
可以参照这个做法去掉那个d

Answer 4

1. 怎样写一个模板引擎
2. art-template：高性能JavaScript模板引擎
3. DisplayJS（将 JS 变量遍历渲染 DOM 的简易框架）

Answer 5

var str = `<div>{{ name + sex + 'hello!' }}</div>`;
var data = { name: "joker", sex: "male" };
function tmpl(str, data) {
  return str.replace(/\{\{([\S\s]+)\}\}/g, (m, p1) =>
    p1.split("+").map(item => {
        item = item.trim();
        var reg = /^['"]([\s\S]+)['"]$/;
        return !reg.test(item) ? data[item] : item.replace(reg, "$1");
      }) .join('')
  );
}