如何编写一个简单的模板引擎

看了下上篇博文,发现相隔也忒特么长了,主要是因为最近事情太多,让人烦恼的是特么我挂科了,废话不多说,让我们进入正题吧!

首先什么是模板引擎呢?
是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档(来自百度百科)

可以看出模板引擎是实现模块化和复用有用的东东(原谅我的取名),目前网络上也有非常著名的模板引擎,这就不列了,感兴趣的自行百度,那么为什么我还要自己写呢?当然肯定是装逼的了(-逃

举个栗子

在angular.js中,相信大家肯定写过类似的代码:

// test.html
<script>
function TestController($scope) {
    $scope.zyt = {
        name: 'zhouyutao'
    };
}
</script>
<body ng-controller="TestController">
{{zyt.name}}
</body>

然后我们通过浏览器打开test.html,在页面上就只显示zhouyutao,而不是显示{{zyt.name}},这就是因为angular.js内置的模板引擎起到的作用。

如何实现

从上面可以看出,只是把js代码中所写的name值替换{{zyt.name}},说明模板引擎就是一个把符合条件的相应字符串转换为所要设置的值。

大家有思路了吗? 更快、更简洁的方法就是使用正则表达式来搜索替换。我曾分享过一篇正则表达式,但我觉得写得不好,就删了,以后期待能写出一篇通俗易懂的。

开始编写

// 用来搜索替换的方法
function zytTpl(tpl, data) {
    var reg = /{{([a-zA-Z$_][a-zA-Z$_0-9\.]*)}}/g;
    return tpl.replace(reg, function(raw, key, offset, string) {
        var paths = key.split('.');
        var lookup = data;
        while(paths.length>0){
             lookup = lookup[paths.shift()];
        }
        return lookup||raw;
    });
}

现在我们就写好了简单的模板引擎,让我们来使用以下吧!

使用

var data = {
    name: 'zhouyutao'
};
var string = 'Betahouse\'s {{name}}';
alert(zytTpl(string, data));

可以从浏览器中看到弹窗显示Betahouse's zhouyutao

小结

感觉基础非常重要,很多新知识就是其实都不算是新知识,只是一大堆基础知识的结合。小伙伴们多多打好基础。

参考
从手写一个模版引擎说起