Handlebars 的基本用法
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。
handlebars是一款jquery插件,[ The Write Less, Do More ],是中小型快速建站的极好选择。
一. 为什么要使用模板引擎
关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上niko的回答:
模板最本质的作用是**【变静为动】一切利用这方面的都是优势,不利于的都是劣势。要很好地实现【变静为动】的目的,有这么几点:
1. 可维护性(后期改起来方便);
2. 可扩展性(想要增加功能,增加需求方便);
3.开发效率提高(程序逻辑组织更好,调试方便);
4.看起来舒服(不容易写错);
从以上四点,你仔细想想,前端模板是不是无论从哪方便优势体现都不是一点两点。其实最重要的一点就是:【视图(包括展示渲染逻辑)与程序逻辑的分离】**分离的好处太多了,更好改了,更好加东西了,调试也方便了,看起来也舒服了,应用优秀的开发模式更方便了(mvvc,mvc等).
二. 选择Handlebars的原因
1. 全球最受欢迎的模板引擎
Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars.以AmazeUI为例,AmazeUI的文档中专门为Web组件提供了其Handlebars的编译模板
Amaze UI 提供的开发模板中,包含一个 widget.html 文件,里面展示了 Widget 在纯浏览器环境中的使用。要点如下:1.引入 Handlebars 模板 handlebars.min.js;
2.引入 Amaze UI Widget helper amui.widget.helper.js;
3.根据需求编写模板 <script type="text/x-handlebars-template" id="amz-tpl">{{>slider slider}}</script>;
4.传入数据,编译模板并插入页面中。$(function() {var $tpl = $('#amz-tpl');var source = $tpl.text();var template = Handlebars.compile(source);var data = {};var html = template(data);$tpl.before(html);
});
2. 语法简单
Handlebars的基本语法极其简单,使用{{value}}将数据包装起来即可,Handlebars会自动匹配响应的数值和对象.以下是一个最简单的模板:
<div class="demo"><h1>{{name}}</h1><p>{{content}}</p>
</div>
三.如何使用Handlebars
1. 下载Handlebars
- 通过Handlebars官网下载:http://handlebarsjs.com./installation.html
- 通过npm下载:
npm install --save handlebars
- 通过bower下载:
bower install --save handlebars
- 通过Github下载:https://github.com/daaain/Handlebars.git
- 通过CDN引入:https://cdnjs.com/libraries/handlebars.js
2. 引入Handlebars
通过<script>
标签引入即可,和引入jQuery库类似:
<script src="./js/handlebars-1.0.0.beta.6.js"></script>
3. 创建模板
- 步骤一: 通过一个
<script>
将需要的模板包裹起来 - 步骤二: 在
<script>
标签中填入type
和id
type
类型可以是除text/javascript
以外的任何MIME类型,但推荐使用type="text/template"
,更加语义化id
是在后面进行编译的时候所使用,让其编译的代码找到该模板.
- 步骤三: 在
<script>
标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内容
<script type="text/template" id="myTemplate"><div class="demo"><h1>{{name}}</h1><p>{{content}}</p></div>
</script>
4. 在JS代码中编译模板
//用jQuery获取模板
var tpl = $("#myTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//匹配json内容
var html = template(data);
//输入模板
$('#box').html(html);
以上述代码为例进行解释:
- 步骤一: 获取模板的内容放入到tpl中,这里
$("#myTemplate")
中填入的内容为你在上一步创建模板中所用的id
.- 提醒: 这里我使用的
jQuery
的选择器获取,当然,你可以使用原生javascript
的DOM
选择器获取,例如:docuemnt.getElementById('myTemplate')
和document.querySelector('#myTemplate')
- 提醒: 这里我使用的
- 步骤二: 使用
Handlebars.compile()
方法进行预编译,该方法传入的参数即为获取到的模板 - 步骤三: 使用
template()
方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板. - 步骤四: 将编译好的字符串插入到你所希望插入到的
html
文档中的位置,这里使用的是jQuery
给我们提供的html()
方法.同样,你也可以使用原生的innerHTML
四.案例演示
以下面的慢慢买网站为例,该项目中的手机列表,是通过Ajax动态获取的,我们不可能在html文档中写入全部的手机列表代码,这是不可能的.所以我们需要通过Handlebars来帮我们将后台传递过来的数据动态的显示到html文档中.
慢慢卖的项目
1. 在HTML中引入:Handlebars,jQuery和本页的Js代码
<script src="./lib/bootstrap/js/jquery-3.2.1.js"></script> //Handlebars
<script src="./js/handlebars-1.0.0.beta.6.js"></script> //jQuery
<script src="./js/product.js"></script> //本页的Js代码
2. 创建模板
在未插入模板的情况下,页面显示如下,现在我们来使用Handlebars让数据动态的显示在网页上.
未使用Handlebars的页面
<!--定义模板 --><script type="text/template" id="product-list-tepl">{{#each result}} <li><a href="#"><div class="product-img">{{{productImg}}}</div><div class="product-text"><h5>{{productName}}</h5><p>{{productPrice}}</p></div><div class="other"><span>{{productQuote}}</span><span>{{productCom}}</span></div></a></li>{{/each}}</script>
以上模板中的{{#}}为Handlebars的helper语法,可以实现Javascript中的逻辑和循环运算.更多使用方法可以参考: http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/
3. 在JS代码中编译模板
//定义getList()函数来发送Ajax请求,传递的参数为后台给的接口文档中定义的参数
function getList(categoryId,pageid){//调用jQuery的Ajax()方法来发送Ajax请求$.ajax({type:'get',url:'http://182.254.146.100:3000/api/getproductlist',data:{pageid:pageid||1,categoryid:categoryId},success:function(data){//用zepto获取模板var tpl = $("#product-list-tepl").html();//预编译模板var template = Handlebars.compile(tpl);//匹配json内容var html = template(data);//插入模板,到ul中$('.product-list ul').html(html);}})
}//入口函数
$(function(){//获取到查询字符串的idvar categoryId = Number(GetQueryString("categoryid")); //getQueryString()是获取上一步传递过来的查询字符串的方法//调用定义的getList()获取手机列表getList(categoryId);
})//获取上一步传递过来的查询字符串的方法
function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;
}
4. 插入模板后的页面如下
使用Handlebars后的页面
通过上面的案例,我相信大家应该能够明白模板引擎的强大,我们只需要在页面中写好一个手机列表的HTML代码,即可动态获取后台传递过来的所有信息,从而在页面中进行展示.
注意: 在实际开发中,我们通过Ajax发送请求时所需要传递的参数,和获取到的JSON或其他格式的数据.皆是需要通过后台给定的接口文档为准.
Handlebars 的基本用法相关推荐
- 关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
- Handlebars的基本用法
使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能. ...
- 【Handlebars】基本用法
基本使用方法 使用Handlebars,首先我们将Html抽出来,就像用script标签包裹起来,放入我们当前的页面中: <script src="script/lib/handleb ...
- 前端面试题整理(定期更新)
前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
- 前端工程师面试题汇总
HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTML>? 行内元素有哪些?块级元素有哪些? 空(void)元素 ...
- 前端工程师面试题汇总--技术
为什么80%的码农都做不了架构师?>>> HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTM ...
- 菜鸟教程中的面试题总结
前端开发面试题 分类 编程技术 本文收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! ...
- 【学习笔记】前端开发面试锦集
链接地址:https://microzz.com/2017/02/10/interview/ 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的&l ...
- 前端面试宝典 html css js ajax es6
面试宝典 一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
最新文章
- 行人识别,无需Anchor | CVPR 2021
- 一个新手上课的路程!!!
- httpservletrequest_了解HttpServletRequest 对象 基本应用
- [EasyTao(道)系列文章之一]太极之道
- s5p4418 Android 4.4.2 驱动层 HAL层 服务层 应用层 开发流程记录(二 硬件抽象层HAL 第二种 ioctl操作方法)
- C语言实例:3个数从小到大排序
- LeetCode 923. 三数之和的多种可能(双指针)
- 微信小程序 不能跳转页面 跳转不生效
- springboot系列(三) 启动类中关键注解作用解析
- Hive教程(05)- Hive命令汇总
- 封装el-select(全球国家名字及国家区号),select 输入框回显
- HCNP——静态路由
- html中怎样做成相册的效果,CSS相册简单实现方法(功能分析及代码)
- 争对让望对思野葛对山栀注解_解析
- 10公斤无人机动力测试台测试-拉力、扭矩、转速
- CMOS反相器版图设计
- 是用bbed工具模拟对块的破坏,并使用rman bock recover进行块恢复
- Hex文件和bin文件以及flash大小关系
- HTML判断是PC端还是手机端,以及获取url参数
- JTR(John The Ripper)的ssh密钥破解记录
热门文章
- popupwindow 不抢夺焦点_儿童摄影指南:寻找不一样的视角
- python语法基本组成单位_Python基础语法总结
- Java 函数式编程合集
- 你有“ChatGPT综合征”吗:想搞钱,或是失业焦虑?
- 电子书下载:iPhone and iPad Apps for Absolute Beginners iOS 5 Edition
- 2022年全球扁藻行业分析报告
- 不能创建src/main/java 源文件夹的问题
- Python 协程详解
- 东莞最好的割双眼皮医院
- 空间数据结构(四叉树/八叉树/BVH树/BSP树/k-d树)