热门搜索:
您现在的位置是：首页 > 文章详情

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

日期：2018-06-14点击：420

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

关于为什么要使用模板引擎，按照我常对学生说的一句话就是：不用重复造轮子.。

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

二. 选择Handlebars的原因

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

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

cb1bdd5b2f565229dedff07a82b615d217f9416f

2. 语法简单

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

b1d46ba03dd61747510c3b9a765365b958739550

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

fedcb77e78e6262e631a4b380df814db84b14316

3. 创建模板

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

4. 在JS代码中编译模板

9c3efef0b786aa835a1a3d326af1cd87283e7a23


以上述代码为例进行解释:
  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良好工作。
d84f32575486d54f7e90d2b21616be5cc80056cc


2. Expressions

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

cc603772ed9380fecc37e54988f96c2c9870435a


3. Context

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


0a43e36ca3fe3a81542009f58ca790b57603fa75

9701f9f83dd1d82065a935d88d870cc4aaed2a79


4. Helpers

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

b8182f0f695c054577a184a468526f3906dd2f3c

21828d6a0aab1020a0110fbacb1be7f9745409cc


5. Block helpers

Block helpers像普通的功能函数一样，但是有开始和结束标签(类似于内置的#if、#each等)，可以修改包含的html的内容。创建更为复杂一些，当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。
同样使用Handlebars.registerHelper()创建block helper，不同的是我们需要使用第二参数，回调函数。看看下面的代码

5b13ba38d47fdce50880d67404d55ecaa477476c

643e4744e489a669dee2eac0213f1db456541ba0


现在你基本上了解了handlebars的常用功能，同样通过Handlebars.js-官方网站，可以获取更多案例、官方文档
地址：http://handlebarsjs.com/

最后

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



原文发布时间为：2018年06月09日
原文作者：WEB开发阿靖

本文来源： 掘金 如需转载请联系原作者




原文链接：https://yq.aliyun.com/articles/616856
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章