第3小时（source|view）

此时小moon小心地注意着后端、需求、ui、领导等任何人，觉得任何人走来都可能又得修改一堆代码了。。。

当然修改代码每个程序员每天都会面对的事情，但面对这种拼接dom的方式，即使她已经很细心了，也是非常容易出错。

她回想了下，那些后端大牛们使用php、java等都使用一些模板引擎如smarty、freemarker（这种方式是前后端耦合在一起，后端渲染好页面返回给client端），来动态地插入数据。那前端有没有模板引擎呢？

思考的同时她飞速地在google中搜索“js template engine”对于选择困难症的同学来说，这么多的库确实很难抉择，但是她直接选择了Mustache.js（名字很拉风：胡须^_^），稍微看了下文档，她就把代码用mustache来重构了一下：

<script id="template" type="x-tmpl-mustache">
    <span class="name">{{name}}</span>生活在<a href="#">{{location}}</a>
</script>

function renderUser(data) {
    var template = document.querySelector('#template').innerHTML;
    Mustache.parse(template); //这个是可选的，可以让解析的速度更快。但如果能让性能更好 为何不加呢？^_^
    var rendered = Mustache.render(template, data);

    return rendered;
}
userService.getUser('/v1/user').then(function(res) {
    document.querySelector('body').innerHTML = renderUser(res.body);
})

望着日渐清晰的代码，她开心地笑了，默默地给自己了一个大赞。

此时后端走了过来。。。