前端模板引擎

前端发展迅速,各种各样的新技术迭代,对后端来说,想做个多表单/多数据展现的页面,布局与难度都越来越大.
模板引擎的好处在于做数据渲染,对应后端人员来说,可以当做vm一样使用.

Handlebars

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

Handlebars可以在没有挫败感的情况下有效的构建语意模板,方便数据渲染.

hello world

  1. 安装
    1.1 源码安装:
    下载地址:handlebars-v4.0.11.js
    引入 js:
     <script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>
    

    1.2 使用NPM:

     npm install --save handlebars
    

    在 node 或webpack 中 使用require(‘handlebars’);进行引入
    1.3 使用Bower:

     bower install --save handlebars
    
  2. 初体验
    2.1 定义模板
    Handlebars看起来跟普通的html代码没啥区别,对于数据展示,使用嵌入式的表达式

     <div class="entry">
       <h1>{{title}}</h1>
       <div class="body">
         {{body}}
       </div>
     </div>
    

    Handlebars的语法表达式是通过{{}}进行包围表示的
    我们可以把模板内容放置在一个<script></script>标签中,如下:

     <script id="entry-template" type="text/x-handlebars-template">
       <div class="entry">
         <h1>{{title}}</h1>
         <div class="body">
           {{body}}
         </div>
       </div>
     </script>
    

    我们需要注意的是,模板代码需要放置在<script></script>标签中而不是直接放在html中,因为html会被解析渲染到界面.
    2.2 编译模板
    我们通过在 js 中调用Handlebars.compile进行模板数据的编译

     var source   = document.getElementById("entry-template").innerHTML;
     var template = Handlebars.compile(source);
    

    注意:这种编译方式不推荐用于生产应用程序,特别是移动设备,更好的方式是进行预编译,而不是在浏览器中编译(耗时).
    接下来我们进行数据传入

     var context = {title: "第一个模板", body: "这是通过Handlebars生成的一第一个模板内容"};
     var html = template(context);
    

    此时, html的值就是:

     <div class="entry">
       <h1>第一个模板</h1>
       <div class="body">
         这是通过Handlebars生成的一第一个模板内容
       </div>
     </div>
    

    2.3 更多内容参考:
    handlebars

  3. 初级使用方式: 3.1 引入 js文件 3.2 在script标签中定义模板 3.3 在js中编译模板,然后传入数据进行数据替换 3.4 获取到生成的html后渲染到指定的节点中去.