前端模板引擎Handlebars理解与举例

栏目: jQuery · 发布时间: 6年前

内容简介:关于为什么要使用模板引擎, 就现在的项目而言,还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照一句话表达:模板最本质的作用是

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

关于为什么要使用模板引擎, 就现在的项目而言,还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照一句话表达: 不用重复制造轮子 . 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上回答:

模板最本质的作用是 【变静为动】 一切利用这方面的都是优势,不利于的都是劣势。要很好地实现【变静为动】的目的,有这么几点:

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

2. 引入Handlebars

通过 <script> 标签引入即可,和引入jQuery库类似:

<script src="./js/handlebars-1.0.0.beta.6.js"></script>
复制代码

3. 创建模板

  • 步骤一 : 通过一个 <script> 将需要的模板包裹起来
  • 步骤二 : 在 <script> 标签中填入 typeid
    • 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 的选择器获取,当然,你可以使用原生 javascriptDOM 选择器获取,例如: docuemnt.getElementById('myTemplate')document.querySelector('#myTemplate')
  • 步骤二: 使用 Handlebars.compile() 方法进行预编译,该方法传入的参数即为获取到的模板
  • 步骤三: 使用 template() 方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板.
  • 步骤四: 将编译好的字符串插入到你所希望插入到的 html 文档中的位置,这里使用的是 jQuery 给我们提供的 html() 方法.同样,你也可以使用原生的 innerHTML

四.案例演示

以下面的慢慢买网站为例,该项目中的手机列表,是通过Ajax动态获取的,我们不可能在html文档中写入全部的手机列表代码,这是不可能的.所以我们需要通过Handlebars来帮我们将后台传递过来的数据动态的显示到html文档中.

前端模板引擎Handlebars理解与举例

慢慢卖的项目

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理解与举例

未使用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中的逻辑和循环运算.更多使用方法可以参考: www.ghostchina.com/introducing…

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理解与举例

使用Handlebars后的页面

通过上面的案例,我相信大家应该能够明白模板引擎的强大,我们只需要在页面中写好一个手机列表的HTML代码,即可动态获取后台传递过来的所有信息,从而在页面中进行展示.

注意 : 在实际开发中,我们通过Ajax发送请求时所需要传递的参数,和获取到的JSON或其他格式的数据.皆是需要通过后台给定的接口文档为准.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Clean Architecture

Clean Architecture

Robert C. Martin / Prentice Hall / 2017-9-20 / USD 34.99

Practical Software Architecture Solutions from the Legendary Robert C. Martin (“Uncle Bob”) By applying universal rules of software architecture, you can dramatically improve developer producti......一起来看看 《Clean Architecture》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具