前端模板引擎

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