Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。 handlebars是一款jquery插件，[ The Write Less, Do More ]，是中小型快速建站的极好选择。 ## **一. 为什么要使用模板引擎** 关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:**不用重复制造轮子**. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上[niko](https://link.jianshu.com?t=https://www.zhihu.com/question/21893022/answer/19647087)的回答: > 模板最本质的作用是**【变静为动】**一切利用这方面的都是优势，不利于的都是劣势。要很好地实现【变静为动】的目的，有这么几点： > **1\. 可维护性（后期改起来方便）**； > **2\. 可扩展性（想要增加功能，增加需求方便）**； > **3.开发效率提高（程序逻辑组织更好，调试方便）**； > **4.看起来舒服（不容易写错）**； > 从以上四点，你仔细想想，前端模板是不是无论从哪方便优势体现都不是一点两点。其实最重要的一点就是：**【视图（包括展示渲染逻辑）与程序逻辑的分离】**分离的好处太多了，更好改了，更好加东西了，调试也方便了，看起来也舒服了，应用优秀的开发模式更方便了（mvvc，mvc等）. ## **二. 选择[Handlebars](https://link.jianshu.com?t=http://handlebarsjs.com./)的原因** ### **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](https://link.jianshu.com?t=http://handlebarsjs.com./installation.html) * **通过npm下载:** `npm install --save handlebars` * **通过bower下载:** `bower install --save handlebars` * **通过Github下载:** [https://github.com/daaain/Handlebars.git](https://link.jianshu.com?t=https://github.com/daaain/Handlebars.git) * **通过CDN引入:**[https://cdnjs.com/libraries/handlebars.js](https://link.jianshu.com?t=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/](https://link.jianshu.com?t=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(){ //获取到查询字符串的id var 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或其他格式的数据.皆是需要通过后台给定的接口文档为准. 作者：李棠辉 链接：https://www.jianshu.com/p/2ad73da601fc 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。