Handlebars—前端引擎模版
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
简介
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度
官网
Handlebars官网地址
特点
优势
Handlebars使用起来方便简洁,可快速创建模板;
扩展性强,可根据自己的需要自定义Helpers,例如常见的类型转换、时间格式转换等;
视图与逻辑分离,解耦性强;
被广泛推广,轻量级、兼容性强;
劣势
代码不清晰,比较混乱,可读性差
拓展性不强,如果需要填充的内容数据类型不够直观、需要转换,这种写法转换起来比较麻烦
假设页面布局结构变动,那么逻辑代码维护起来麻烦
使用
使用CDN
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
案例
each block helper
可以使用内置的{{#each}}helper遍历列表块内容,用this来引用遍历的元素
<ul> {{#each name}} <li>{{this}}</li> {{/each}}</ul>
这里的this指的是数组里的每一项元素,和上面的Block很像,但原理是不一样的这里的name是数组,而内置的each就是为了遍历数组用的,更复杂的数据也同样适用。
if else block helper
{{#if}}就你使用JavaScript一样,你可以指定条件渲染DOM,如果它的参数返回false,undefined, null, “” 或者 [] (a “falsy” value), Handlebar将不会渲染DOM,如果存在{{#else}}则执行{{#else}}后面的渲染
{{#if list}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}</ul>
{{else}}
<p>{{error}}</p>
{{/if}}
这里{{#if}}判断是否存在list数组,如果存在则遍历list,如果不存在输出错误信息
unless block helper
{{#unless}}这个语法是反向的if语法也就是当判断的值为false时他会渲染DOM 例如:
{{#unless data}}
<ul id="list"> {{#each list}}
<li>{{this}}</li> {
{/each}}</ul> {{else}}
<p>{{error}}</p>
{{/unless}}
with block helper
{{#with}}一般情况下,Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法,我们可以将context转移到数据的一个section里面(如果你的数据包含section)。 这个方法在操作复杂的template时候非常有用。
<div class="entry">
<h1>{{title}}</h1>
{{#with author}} <
h2>By {{firstName}} {{lastName}}</h2>
{{/with}}</div>
感谢
Handlebars
百度百科
以及勤劳的自己