前端模板引擎

前端发展迅速,各种各样的新技术迭代,对后端来说,想做个多表单/多数据展现的页面,布局与难度都越来越大.
模板引擎的好处在于做数据渲染,对应后端人员来说,可以当做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后渲染到指定的节点中去.