简单的前端渲染模板实现

国庆节过去第一天，有点懒，但一想到今年的法定节假日都已经过完，慢慢就燃起奋斗欲望。今天碰巧看到网络上一些高手博客写着渲染模板教程，就做个随笔记录吧！

渲染模板简单的说，就是将一些数据，字符串加载到几个的变量当中。

var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.';

js数据加载方式

var data = {
    "name": "Barret Lee",
    "age": "20"
};

var result = tplEngine(tpl, data);

以上使用方式，相比大家都很熟悉，目前成熟的渲染模板也有很多，包括一些mvc框架avaron ，angular，vue等都自带前端渲染模板。所以大家也知道模板具有维护方便，代码清晰，版本迭代都很方便。缺点就是seo 等，不过大家做项目时候，关于框架选择，模板选择基本上都是别人搞好，我们都是学着用就可以了。

所以我们就上面代码，做个js编译，我们要把<%name%>识别出来，然后将js数据写进去，所以我们要使用正则表达式。

<div class="name">我的名字叫做<%name%></div>



    <script>
        var name = document.querySelector('.name').innerText;
        //数据源
        var data = {
            "name": "Barret Lee",
            "age": "20"
        };
        //正则获取<%name%>中的name，并用data中的name的值替换
        var result = name.replace(/<%([^%>]+)?%>/g,function(s0,s1){
            return data[s1]
        });
        document.querySelector('.name').innerText = result;
    </script>

上面代码使用正则获取<%name%>变量，然后将data中的name值替换，精简版js模板已经完成。嗯，哪怕这只是简单的字符串替换。

由于时间关系，暂时这样，明天有空继续补上。

------------------------2017-10-10---------------------

继续昨天代码，当对象为对象，字符串替换方式就失灵了，我们换一种方式去探索

<div class="render"><%name%> <%info.age%>