handlebars模板引擎使用初探1

转载

mb5fd86a050ef28 2018-03-10 20:26:00

文章标签 html 字符串 jquery 数据树结构 文章分类 代码人生

谈到handlebars，我们不禁产生疑问，为什么要使用这样的一个工具呢？它究竟能为我们带来什么样的好处？如何使用它呢？

一、handlebars可以干什么？

首先，我们来看一个案例：

有这样的html结构：

    <div class="demo">  
        <h1>name</h1>
        <p>content</p>
    </div>

这个结构会在html文件中反复使用，并且每次h1和p标签的内容都不同。

一种常见的做法是：

每次都写一遍该结构。

这样难免显得过于繁琐！

我们是否可以将html结构提取出来，每次传入不同的值来达到目的呢？

当然可以，这便是handlebars模板引擎的最简单的应用。

二、handlebars环境配置

要使用handlebars，首先是要引入handlebars。

例如，我们要在index.html文件中使用handlebars，可以通过cdn用script标签引入：

<script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>

也可以下载handlebars，然后用script标签引入，如：

<script type="text/javascript" src="./handlebars.js"></script>

三、模板、expressions

handlebars声称模板引擎，显然它的使用离不开模板。就像下面这样：

  <script type="text/x-handlebars-template" id="tpl">
    <div class="demo">  
        <h1>{{name}}</h1>
        <p>{{content}}</p>
    </div>
  </script>

首先我们使用了一个script标签，并将type属性设置为"text/x-handlebars-template"，这表明我们声明了一个handlebars模板，这个模板的id为"tpl"。

你可能不知道{{name}}和{{content}}的意思，这是handlebars的expressions，形如{{value}}。handlebars模板会自动匹配{{value}}，并将其替换为value的值，value可以是对象甚至是函数。你可能产生疑问：这里，模板中的name和content从何而来呢？

的确，在使用handlebars模板的时候，需要为模板传入name和content的值，后文我们再详述。

我们已经发现，handlebars模板是一个script标签，我们如何将其插入HTML中呢？

四、编译、渲染

为了将handlebars模板插入HTML，我们在index.html的body标签中输入如下代码：

（为了简化操作，我们在以下代码之前先引入了jquery。）

  <script type="text/javascript">
    var obj={name:'lsz',content:'handlebars is good!'};//定义一个对象用于存放需要插入模板的数据
    var t=$('#tpl').html();//获取到handlebars模板，并将其中的html代码转换成html字符串，t是字符串
    console.log(t);
    var f=Handlebars.compile(t);//使用handlebars对转换后的html字符串进行编译，f是函数
    console.log(f);
    var h=f(obj);//将obj作为参数传入f函数，实现将数据插入模板之中，h是html字符串
    console.log(h);
    $('body').html(h);//将插入数据后的html字符串转换为dom元素，插入到body元素中，
  </script>

由此我们总结出使用handlebars模板的步骤：

1、通过dom操作获取handlebars模板；
2、对handlebars模板进行编译，得到函数；
3、给函数传入参数并运行；
4、将函数返回值插入dom。

我们可以封装一个函数专门用于渲染：（也是在安装了jquery的情况下）

  function renderTemplate(templateSelector,data,htmlSelector) {
    var t=$(templateSelector).html();
    var f=Handlebars.compile(t);
    var h=f(data);
    $(htmlSelector).html(h);    
  }

前面我们已经谈到函数的参数传值是按值传递，对于以上的函数，我们可能产生疑问：

templateSelector、htmlSelector仅仅得到传入字符串的副本，data得到的是传入对象的内存地址的副本，是否真能影响dom树结构呢？

答案是显然的，这是因为：