专题教程之Javascript模板引擎handlebars

如果你从事前端开发的话，或者使用javascript开发动态前端页面比较多的话，对于javascript模板引擎一定不会陌生。关注gbin1博客的朋友肯定还记得我们曾经介绍过的一个在线选择javascript模板引擎的工具网站：template engine chooser ，使用工具可以帮助你大体的了解不同的javascript模板引擎的特点，并且有效帮助你根据你的具体需求来选择js模板引擎。在今天的这篇GBin1专题教程中，我们将介绍比较流行的javascript模板引擎handlebars，如果你没有接触过的话，希望在阅读完我们的教程后，能对它有一个大体的了解，并且能够有机会应用到你的开发项目中去。由于时间和个人认知的深度关系，有可能有些不够准确的地方，如果你发现有任何不准确的地方，请在本文末尾处给我们留言，或者访问我们的GB标签社区提问或者留言。我们将及时的修改内容，希望能够给广大的前端开发程序猿提供最好的技术教程，如果你也有原创的教程，欢迎投递到我们博客或者标签社区！

什么是javascript模板引擎？

javascript模板引擎可以用来帮助开发人员有效的组织和分离前端页面代码中的显示层和数据层两个部分。这里我们主要集中在在前端页面内容的展示方面。如果你接触过后端相关开发的话，基本的思路和目地是一致的。具体这里我们举个简单的例子：

如果你需要将一个来自后台的JSON数据对象转化成页面显示内容的话，通常使用如下方式（具体演示使用jQuery）：

var siteinfo={‘sitename’：‘terry li’， ‘siteurl’：‘gbin1.com’}， userwrapper = $（‘《ul/》’）;userwrapper.append（‘《li/》’ + siteinfo.sitename+ ‘《/li》《li/》’ + siteinfo.siteurl + ‘《/li》’）;

以上代码非常简单，我们将得到的siteinfo对象直接使用字符串拼接来转化成页面需要展示的html标签。这里我们使用一个ul元素来展示站点的全部相关信息。

从代码本身来讲，无可厚非，大部分人对于简单的页面Html生成基本都使用这种方法，而比较现实的状况是，很多的前端开发人员都习惯这些书写代码，因为思路简单并且直接，当然，包括我本人。对于代码层次和数据结构简答的项目来说，这样的写法非常易于理解。但是如果这个JSON对象属性内容丰富复杂，并且前台显示逻辑稍微复杂一点儿的话，我相信，使用这种字符串连接的方式，将绝对会让阅读维护代码的同事抓狂。

而javascript模板引擎恰恰就是为了帮助我们有效的组织数据及其展示内容而出现的。和其它的模板使用方式一样，你需要做如下两个事情：

1. 创建展示模板

2. 将数据解析到模板中

什么时候该使用javascrpt模板引擎？还是说任何时候都该使用模板引擎吗？

模板引擎确实是一个不错的开发解决方案，但是并且任何情况都适合使用，如果你只是简单的生成一段html代码的话，个人觉得没有必要一定使用模板引擎。使用模板反而使得代码复杂。模板引擎的目的主要为了帮助你更好的管理前端HTML标签，如果你需要生成的HTML代码量少之又少，完全没有必要使用模板引擎。而且如果你是开发移动端的应用的话，肯定也不愿意为了少部分功能而引入这么大一个类库。

使用Handlebars

在撰写本教程的时候，handlebars还依然是RC版本，你可以在官方的下载地址获取javascript，下载后你将得到一个handlebars-1.0.rc.1.js文件，请在需要调用handlebars模板引擎的页面引入此javascript文件即可。