模板引擎

关于模板引擎的介绍

后台返回给我们的JOSN数据，然后通过JOSN数据去进行页面的渲染，但是这个时候我们会遇到一个问题，就是JSON数据对页面的渲染，会遇到同样格式的数据问题

比如我们下面的JSON中

{
  "info": [
    {
      "id":1,
      "name": "小明",
      "age": 18,
      "sex": "男"
    },
    {
      "id":2,
      "name": "小刚",
      "age": 15,
      "sex": "女"
    },
    {
      "id":3,
      "name": "小红",
      "age": 14,
      "sex": "女"
    }
  ]
}
 

 

如果遇到数据类型相似的内容，我们可以使用模板进行页面的批量解析

什么是模板？我们可以通过生活的常见去联系

 

 

们看上图，发现如果我们想制作砖，一定是有砖模子的，通过这个模子批量生产砖。

所以我们的代码也是一样，如果我们有类似的结构进行展示，数据已有了，接下来就是需要“模子”；

所以模子在我们的专业术语中就是模板引擎

比如我们看下面的文字
我是小明，今年18岁了，我是男生

“小明”，“18”，‘男生’都是动态传进来的数据，所以我们说“我是**，今年**岁了，我是**”就是模板，也是我们要制作的模板引擎

underscore的模板引擎

https://underscorejs.net/

 

比如我们常见的

_random()     //随机数
_each()     //数组和对象的遍历

我们使用的是underscore的_template()方法去实现模板引擎的功能

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

 

基本使用

    <script src="/underscore-min.js"></script>
    <script>
        // 模板字符串
  var templateStr = "我是<%=name%>，今年<%=age%>岁了，我是<%=sex%>"
  // 模板编译函数
  var compiled = _.template(templateStr);
  // JOSN数据
  var jsonObj = {
    "name": "小明",
    "age": 18,
    "sex": "男"
  }
  var jsonObj2 = {
    "name": "小红",
    "age": 15,
    "sex": "女"
  }
  // 编译后的结果
  var result = compiled(jsonObj);
  var result2 = compiled(jsonObj2);
  console.log(result)
  console.log(result2)
    </script>

 

 

如何制作模板，两种方法

第一种就是直接讲我们的模板HTML代码制作成字符串然后制作模板函数

var template = "<tr><td><%=id%></td><td><%=name%></td><td><%=age%></td><td><%=sex%></td></tr>"

第二种就是通过我们的script标签去实现

我们知道script如果type值“text/javascript;”的时候会识别并执行内部的代码，但是如果不是，会静默，不报错不运行，所以可以用来存放一些内容

比如我们可以给下面的模板的type值为“text/template”表示内部存放的是模板字符串，也可以设置其他的，尽量设置有含义的名称

<script type="text/template" id="templateText">
    <tr>
      <td><%=id%></td>
      <td><%=name%></td>
      <td><%=age%></td>
      <td><%=sex%></td>
    </tr>
  </script>