hogan.js模板语法及数据渲染
前言
之前写项目一直用的框架，最接近原生的可能就是JQ+Bootstrap写的PC端网页了。但最近的项目用的是原生JS+JQ库实现，少了框架的便捷，感觉填充数据就成了一个"痛苦"的活儿（说来说去，还是JS基本不是太牢的过，(逃...）。前期熟悉代码时，我发现项目中引用了一个叫做hogan.js的东西，上网查查才发现，这东西作用和框架的思想其实很接近，虽然使用中还是有些不太方便，但是有总比没有好啊！！于是乎，开始研究hogan
比较中意的一篇博文：模板引擎之hogan.js （其实百度搜hogan.js第一篇就是了 0.0）
基本语法
言归正传，hogan.js的基本使用思想类似于vue的数据绑定。
1. 标签可以嵌套使用
2. {{data}} 转义的变量，不会渲染html标签
3. {{{data}}} 不转义的变量，会渲染html标签，比如接口返回的富文本编辑器的内容
4. {{#list}} {{/list}} 列表循环 / 真值判断,只能循环数组，不能循环字符串
5. {{^list}} {{/list}} 空列表 / 非真值判断
6. {{.}} 枚举的当前元素 //一般都是枚举数组，不能枚举字符串
7. {{!}} 我是注释
---------- 上述7点引用自前言中的那篇博文
特别注意第三点哈，我的另一篇博文 wangEditor的基本使用及踩坑记录 中，细心一点你就会发现，我使用过{{{content}}}来填充从后台接口返回的富文本编辑器内容喔~
它会把字符串中的<div>一类标签转义为有意义的字符，而不是文本，这样，才能将富文本编辑器的内容较完整的还原到页面上哦。
数据渲染到页面
好了，现在数据有了，我也将数据通过hogan语法写到了string页面该有的位置上去，刷新一下网页，我懵了...页面上还是没有数据，这是怎么一回事？？？
原因在于，我没有将js文件中取得的数据渲染到页面模板上去。此时你一定想知道string页面是个什么鬼，这是自己自定义的一个文件后缀名，用于将html页面上需要绑定数据的结构剥离出来，当数据变化时便于刷新此部分的HTML内容，而非刷新整个HTML文档，效果类似于VUE的组件，当数据填充完毕之后，再将此string模板文件添加至HTML的指定节点上去，完成页面的渲染。
OK，这下弄明白了，可以开始渲染页面了。
renderHTML: function (htmlTemplate,data) {
var template = hogan.compile(htmlTemplate)
var result = template.render(data)
return result
}
将渲染的代码封装成函数（因为后续会有很多地方要用到），之后调用的时候仅需传入需要渲染数据的string模板文件和对应数据即可。
!tips：渲染完毕之后不要忘记将string模板挂载到HTML上去哦。也可以先将其挂载上去，之后需要刷新/更改数据也没有影响。
题外补充一点
不要头痛string后缀的文件编辑器不能识别为HTML文件，不能使用emmet语法进行快速编写代码。以下是在VS CODE中将string后缀文件识别为html文件的方法：
基本步骤
菜单左上角"文件"---->"首选项"---->"设置"----->"文本编辑器下的文件"------>点击"在settings.json中编辑"------>在用户设置最后添加一行代码
"files.associations": {"*.string": "html"},参考博文： 让VS CODE将JSP文件识别为HTML文件
!tips：与这篇博文需求不同的是，我需要将string文件识别为html文件，所以需要更改最后一步。