手写JavaScript模板引擎

在上一篇博客中，写了简单的模板引擎的例子，是存在一定的局限性的，所以打算再看看这个模板引擎

查找要替换的部分

这次的模板是类似下面这样的

var str = "今天是{{day}}，天气{{weather}}, 我今天的计划是, {{plan}}";
var reg = /{{\w+}}/g;
console.log(str.match(reg));

[“{{day}}”, “{{weather}}”, “{{plan}}”]

上面的是通过正则进行匹配到的，很明显匹配到了{{}}这样子的，\w是匹配单词，但是下面的模板就没办法都匹配了

var str = "今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{\w+}}/g;
console.log(str.match(reg));

[“{{weather}}”]

只匹配到了weather，所以需要重新写正则表达式了，因为变量是以字母数字下划线或者$开头的，还要注意这个点的存在，重写的如下面所示：

var reg = /{{[a-zA-Z0-9\.]+}}/g;

[“{{day.today}}”, “{{weather}}”, “{{day.plan}}”]

可以看到结果，是我们想让它匹配到的，那么接下来只要将进行一个替换操作就行，比如replace

那么现在就该想如何完成替换这个问题了？

替换

var s = "今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{[a-zA-Z0-9\.]+}}/g;

var str = s.replace(reg, function(raw, key, offset, string) {
  console.log(arguments);
})

• [object Arguments] {
  0: “{{day.today}}”,
  1: 3,
  2: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }
• [object Arguments] {
  0: “{{weather}}”,
  1: 19,
  2: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }
• [object Arguments] {
  0: “{{day.plan}}”,
  1: 41,
  2: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }

可以发现，raw这个参数是带有{{}}的，要匹配数据中的键，就需要去掉{{}}

var s = "今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;

var str = s.replace(reg, function(raw, key, offset, string) {
  console.log(arguments);
})

输出结果如下：

• [object Arguments] {
  0: “{{day.today}}”,
  1: “day.today”,
  2: 3,
  3: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }
• [object Arguments] {
  0: “{{weather}}”,
  1: “weather”,
  2: 19,
  3: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }
• [object Arguments] {
  0: “{{day.plan}}”,
  1: “day.plan”,
  2: 41,
  3: “今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}”
  }

可以看到通过给正则上加了一个()，就达到了目的

var s = "今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}";
var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;
var data = {
  day : {
    today : '周六',
    plan : '学习'
  },
  weather: '晴'
}

var str = s.replace(reg, function(raw, key, offset, string) {
  return data[key] || raw;    ///返回raw是为了防止data中不包含key这个键，所以原样返回
});

console.log(str);

结果如下，带有点的没有正确替换

“今天是{{day.today}}，天气晴, 我今天的计划是, {{day.plan}}”

改进

封装为一个函数：

function template(str, data) {
  var reg = /{{([a-zA-Z0-9_$][a-zA-Z0-9\.]+)}}/g;  
  return str.replace(reg, function(raw, key, offset, string) {
    var paths = data,
        ary = key.split('.');

    while(ary.length > 0) {
      paths = paths[ary.shift()];
    }

    return paths || raw;   
  });
}

使用：

var s = "今天是{{day.today}}，天气{{weather}}, 我今天的计划是, {{day.plan}}";

var data = {
  day : {
    today : '周六',
    plan : '学习'
  },
  weather: '晴'
}

console.log(template(s, data));

“今天是周六，天气晴, 我今天的计划是, 学习”

---

今天的任务是学习，哈哈，学习去了，希望这篇博客对你有帮助 ^_^