node 第十六天 模板引擎handlebars

1. handlebars handlebars文档

   Handlebars 是一种简单的 模板语言。
   它使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像常规的文本，但是它带有嵌入式的 Handlebars 表达式 。

2. 这里我们要注意模板引擎的定义

   模板引擎是对一串字符串 结合数据 编译后生成 另外一串字符串 本质上和html没什么关系,只不过可以用来渲染html模板, 其编译语言也是多样的, javascript ruby 等

   所以我们会说vue并不是单纯的模板引擎, vue的模板编译语言只有javascript 读过源码的都是知道render函数
   因为vue是专注于某一种形式的模板的(例如dom对象), vue这样做的好处是能够对模板做更多的处理, 比如绑定事件, 专注于 javascript 表达式等

3. 前后端分离的模式下在浏览器中使用handlerbars, 本质是基于正则替换的, 因为浏览器端没有直接读写模板文件的能力, 这种用法知道就可以, 正常没人会这么做, 没有任何优势便捷性可言

4. handlebars 等模板引擎一般用于传统的服务端开发
   web服务端通过收到用户请求–>查询数据库–>填充模板–>发送渲染好的模板(html)

5. 下面是基于express node框架的一个例子

   根路由转发

   const express = require('express');
   var router = express.Router();
   
   const data = {
     data: [
       {
         name: 'zhang',
         age: 18,
         sex: 1,
         withme: {
           name: '0k'
         }
       },
       {
         name: 'li',
         age: 15,
         sex: 0,
         withme: {
           name: '0k'
         }
       },
       {
         name: 'wang',
         age: 8,
         sex: 1,
         withme: {
           name: '0k'
         }
       }
     ],
     name: 'yes'
   };
   router.get('/', function (req, res, next) {
     res.render('index', data);
   });
   
   module.exports = router;
   

   index.hbs

   <ul>
     {{#each data}}
       {{#each this}}
         <li>
           {{@key}}
           ---
           {{../../name}}
         </li>
       {{/each}}
       <li style='color: red'>
         {{#with withme}}
           {{name}}
         {{/with}}
         -----
         {{name}}</li>
       <li>
         name:
         {{this.name}}
       </li>
       <li>
         age:
         {{this.age}}</li>
       {{#if this.sex}}
         <li>男</li>
       {{/if}}
       {{#unless this.sex}}
         <li>女</li>
       {{/unless}}
         <li><br /></li>
     {{/each}}
   </ul>
   

   渲染结果:
   

6. 本文最重要的是模板引擎的概念 😃