作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars

一.为什么需要使用模板引擎?

关于为什么要使用模板引擎,按照我常对学生说的一句话就是:不用重复造轮子.。
 
简单来说,模板最本质的作用是“变静为动”,一切利于这方面的都是优势,不利于的都是劣势。
要想很好地实现“变静为动”的目的,有这么几点:
1. 可维护性(后期改起来方便);
2. 可扩展性(想要增加功能,增加需求方便);
3.开发效率提高(程序逻辑组织更好,调试方便);
4.看起来舒服(不容易写错);
从以上四点来看,前端模板引擎体现的优势都不是一点两点的。
其实最重要的一点就是:视图(包括展示渲染逻辑)与程序逻辑的分离,分离的好处太多了,比如说后期的维护修改代码,增加代码,调试代码,和应用开发模式(MVC、MVVM)都方便很多。
 

二. 选择Handlebars的原因

1. 全球最受欢迎的模板引擎

Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎。
Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars。
以AmazeUI为例,AmazeUI的文档中专门为Web组件提供了其Handlebars的编译模板

2. 语法简单

Handlebars的基本语法极其简单,使用{{value}}将数据包装起来即可,Handlebars会自动匹配响应的数值和对象.以下是一个最简单的模板:

三.使用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库类似:

3. 创建模板

  1. 步骤一: 通过一个<script>将需要的模板包裹起来
  2. 步骤二: 在<script>标签中填入type和id
  • type类型可以是除text/javascript以外的任何MIME类型,但推荐使用type="text/template",更加语义化
  • id是在后面进行编译的时候所使用,让其编译的代码找到该模板.
  1. 步骤三: 在<script>标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内
 

4. 在JS代码中编译模板

以上述代码为例进行解释:
  1. 步骤一: 获取模板的内容放入到tpl中,这里$("#myTemplate")中填入的内容为你在上一步创建模板中所用的id.
    1. 提醒: 这里我使用的jQuery的选择器获取,当然,你可以使用原生javascript的DOM选择器获取,例如:docuemnt.getElementById('myTemplate')和document.querySelector('#myTemplate')
  2. 步骤二: 使用Handlebars.compile()方法进行预编译,该方法传入的参数即为获取到的模板
  3. 步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板
  4. 步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML

四.实际运用中5个常用功能

1.Templates

当您引入库之后,我们可以愉快的书写模板了,推荐的方式是通过特殊type的script标签来添加模板,type属性是非常重要的,否则浏览器会将它们看做javascrip解析。
模板具有一个很容易理解的语法,可以使用html、普通文本和表达式,表达式通常被包含在两对或三对花括号里,可以包含变量或功能函数。模板需要编译之后才能使用,如下面代码所示,注意一点,我们使用了jquery仅仅为了方便dom操作,handlebars可以脱离jquery良好工作。

2. Expressions

上面所示的例子,表达式中的任何html代码将会被自动忽略,这是一个非常实用的性能,但是有的时候我们需要解析html,那么就要用三个花括号{{{ }}},如下面代码所示。
另外,handlebars表达式允许嵌套值,可以方便我们访问javascript对象的任何值。

3. Context

Handlebars利用了Mustache的强大特性,context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中,使用#each、#with等方法可以方便的使用该对象的数据。看了下面这个案例,那就明白了

4. Helpers

Handlebars不允许在模板中使用javascript,而是提供了一些列的功能函数(helpers),可以在模板中调用,方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此,{{helpername}},同时也可以传递参数,{{helpname 12345}}。
开发新的helper,使用registerHelper function,下面代码演示了如何创建新的功能函数,如何使用内置的功能函数

5. Block helpers

Block helpers像普通的功能函数一样,但是有开始和结束标签(类似于内置的#if、#each等),可以修改包含的html的内容。创建更为复杂一些,当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。
同样使用Handlebars.registerHelper()创建block helper,不同的是我们需要使用第二参数,回调函数。看看下面的代码
现在你基本上了解了handlebars的常用功能,同样通过Handlebars.js-官方网站,可以获取更多案例、官方文档
地址:http://handlebarsjs.com/

最后

模板引擎是我们做前端开发必备的一个知识,对于我们快速开发和做出更加健全的优秀代码都是有帮助的。
我在《8个要点教你轻松写出优秀Javascript代码》里面有讲过怎么写好我们的JavaScript代码,大家可以去看一下。

作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars的更多相关文章

  1. web前端开发工程师

    web前端开发工程师 百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...

  2. 如何成长为一名合格的web前端开发工程师呢?

    前端开发工程师不仅仅要掌握一些基础的美工设计等还要懂得网页设计类的HTML JavaScript和css,这三种能力缺一不可,虽不要求你特别的精通,但至少要熟练的掌握,能够运用自己所了解的这些技术和知 ...

  3. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  4. Web前端开发工程师基本要求

    一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...

  5. 从就业面分析web前端开发工程师就业前景(2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  6. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

  7. 作为一名Java开发工程师需要掌握的专业技能

    在学习Java编程完之后,学员们面临的就是就业问题.作为一名Java开发工程师,企业在招聘的时候,也是有一定的标准的. 为了帮助大家更好的找到适合自己的工作,在这里分享了作为一名Java开发工程师需要 ...

  8. 怎么成为合格的WEB前端开发工程师

    web前端开发工程师目前来讲是一个热门职位,但是要成为一个合格的web前端开发工程师,需要掌握的知识可不少,零度就简单的为大家讲讲. 大致的来讲,web前端开发工程师需要掌握的知识有:HTML.CSS ...

  9. Web前端开发工程师课程大纲

    PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...

随机推荐

  1. button type=“submit”

    写js遇到任何怪异的行为 一定要先看看是不是submit搞的鬼. 函数内部最后总是返回 return false; 也是一个好的习惯

  2. OSG数学基础:坐标系变换

    三维实体对象需要经过一系列的坐标变换才能正确.真实地显示在屏幕上.在一个场景中,当读者对场景中的物体进行各种变换及相关操作时,坐标系变换是非常频繁的. 坐标系变换通常包括:世界坐标系-物体坐标系变换. ...

  3. ZOJ 1666 G-Square Coins

    https://vjudge.net/contest/67836#problem/G People in Silverland use square coins. Not only they have ...

  4. 父类属性值的copy

    最近开发中遇到这样一个问题将父类的属性值copy到子类中,从而对子类添加一些其他属性. 父类: package com.jalja.org.jms.test01; import java.util.D ...

  5. JAVA学习之泛型

    ArrayList<E>类定义和ArrayList<Integer>类引用中涉及的术语:1.整个ArrayList<E>称为泛型类型 2.ArrayList< ...

  6. uva1086 The Ministers' Major Mess

    题意:有n 个议案,m 个大臣,每个大臣会对其中的ki 个议案投票,为赞成或反对.现要你判断是否存在一种方案,使得每个大臣有大于一半的投票被满足.若存在,还需判断某个议案是不是一定要通过,或者一定不能 ...

  7. 新浪云部署java web程序 注意事项

    在新浪云新手指南里有部署java的示例,但是对一个新手来说难免会有一些地方犯错,折腾了好长时间才把自己的java web部署到了新浪云.这里主要写一些我遇到的问题与第一次使用新浪云的朋友分享一下. 首 ...

  8. Python文件对象的访问模式

  9. 【题解】51nod 1686第K大区间

    成功的秘诀,在于克服自己看题解的冲动……[笑哭].自己A掉这题还是灰常开心的~ 以及爱死 two - pointer ! two - pointer 大法是真的好哇……这个题目有上一题的经验:求第\( ...

  10. POJ3666:Making the Grade——题解

    http://poj.org/problem?id=3666 题目大意:给n个数,每次操作可使一个数+1或-1,求最小操作数使得序列不下降或不上升. —————————————————————— 思路 ...