关于前端语义模板使用的那点事-Handlebars
2019-12-03 本文已影响0人
末世狂人
自从被上家公司的部门经理带入到后端这个坑之后，对于前端就渐行渐远。每次对着前端的界面效果指点江山，心情不要太高兴 O(∩_∩)O哈哈~。
因为工作原因，又要重新拾起前端开发的工作。简直就是痛不欲生，接口开发2小时，界面开发2天。
ps:这个宽度调一调，这个高度有点高，这个颜色不对，这个不难的，这样...这样....这样....
o((⊙﹏⊙))o
刚开始写前端的时候，思想还没转变过来。
代码可以是这样的
var $container = $('#container');//容器
var content = '';
data.forEach(function (item) {
content += '<p>' + item.name + ':' + item.age + '</p>';
});
$container.html(content);
可以是这样的
var personKey = "<img name=\"personKyLabel\" class=\"img-label\" src=\"keyLabelImg\" title=\"keyValue\" onclick='getKeyPersonnelDetails(\"keyCode\")'>";
//替换值
var personKeyImg = personKey.replace("keyLabelImg", imgUrl);
等到需要修改的时候，这个双引号？这个单引号？我还在什么地方用过？改了会不会有影响？懵逼三连击。。。
然后就查资料，发现Handlebars这个东西。
Handlebars—semantic template engine
嗯。。。
引入
<script src="script/lib/jquery.js"></script>
<script src="script/lib/handlebars.js"></script>
1.基础
比如我们返回的数据时这样的
var data = [
{
name: 'xxx',
age: 10
},
{
name: 'zzz',
age: 12
},
{
name: 'yyy',
age: 9
}
];
要将数据利用起来，我们需要这样
首先我们要建立一个模板结构，也就是我们的Html，为了展示和逻辑分离，我们不应该将模版内容放到js当中。
使用Handlebars，首先我们将Html抽出来，就像用script标签包裹起来，放入我们当前的页面中，就像这样
<body>
<div id="container"></div>
//定于语义模板ID，用于使用的时候读取
<script type="text/x-handlebars-template" id="template-user">
//each里面的this是指向循环的单个对象
{{#each this}}
<p>{{name}}:{{age}}</p>
{{/each}}
</script>
</body>
记得改变type类型，这样浏览器就不会把标签里的内容当作js执行。然后编写我们的代码
//容器,就是展示你语义模板的外围容器
var $container = $('#container');
//获取到html结构，语义模板定义的ID
var source = $('#template-user').html();
//编译成模板
var template = Handlebars.compile(source);
//将值放入到对应的key中，生成完成的html结构
var html = template(data);
//将生成的html插入到容器中，这里也支持jquery的语法，如append等，根据你的实际业务逻辑来
$container.html(html);
Handlebars的基本使用就如上了，用{{ }}输出内容。记住了
其他如if、转义、循环等语法参照转载的文章
Handlebars—semantic template engine
这里多说几句
以为Handlebars的if只能判断true和false，没办法进行这种a===3的逻辑判断。并且 if在判断前会做类型转换，如''、undefined、null、0、[]等都会被识别为false。
所有在后端返回数据的情况下，尽量将逻辑判断进行处理，方便前端直接展示，避免二次逻辑处理。
