模板引擎

后台返回的JOSN数据，在通过JOSN数据去进行页面渲染的时候，会遇到一个问题，就是JSON数据对页面的渲染，会遇到同样格式的数据问题（比如表单、列表......）

如果遇到数据类型相似的内容，可以使用模板进行页面的批量解析。这个时候就用到模板引擎

模板引擎：如果我们有类似的结构进行展示，数据已有了，接下来就是需要“模子”，所以模子在我们的专业术语中就是模板引擎

我这里用到的模板引擎是第三方的插件 underscore.js

来个简单小例子

<script src="js/underscore.js"></script>
<body>
    <script>
        // 模板字符串
        var templateStr = "大家好，我是<%=name%>,今年<%=age%>岁了，我来自美丽的<%=adress%>,我很喜欢<%=hobby%>";
        // 模板编译函数
        var compiled = _.template(templateStr);
        //console.log(compiled)
        // JOSN数据
        var jsonObj1 = {
            "name": "小黑",
            "age": "25",
            "adress": "三亚",
            "hobby": "冲浪"
        }
        var jsonObj2 = {
            "name": "小白",
            "age": "22",
            "adress": "冰城哈尔滨",
            "hobby": "冰雪运动"
        }
        // 编译后的结果
        var result1 = compiled(jsonObj1);
        var result2 = compiled(jsonObj2);
        console.log(result1);
        console.log(result2);
    </script>
</body>

underscore.js 表格渲染

制作模板有两种方法

第一种就是直接将模板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”表示内部存放的是模板字符串，也可以设置其他的，尽量设置有含义的名称

<body>
    <table>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </table>
    <script type="text/template" id="templateText">
        <tr>
      <td><%=id%></td>
      <td><%=name%></td>
      <td><%=age%></td>
      <td><%=sex%></td>
    </tr>
  </script>
    <script src="js/underscore.js"></script>
    <script>
        var table = document.getElementsByTagName("table")[0];
        // 获取模板结构
        var templateText = document.getElementById("templateText");
        // 获取template内部的数据
        var templateData = templateText.innerHTML;
        // 发送请求
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var data = xhr.responseText;
                    var obj = JSON.parse(data)
                    renderDom(obj)
                }
            }
        }
        xhr.open("get", "test.json", true);
        xhr.send(null);
        // 渲染模板
        function renderDom(obj) {
            // 编译模板函数
            var compiled = _.template(templateData);
            // 遍历返回的数据内容
            _.each(obj.info, function (item) {
                var dom = compiled(item);
                // 追加节点上树
                table.innerHTML += dom;
            })
        }
    </script>
</body>

.json

{
  "info": [
    {
      "id":10001,
      "name": "小明",
      "age": 18,
      "sex": "男"
    },
    {
      "id":10002,
      "name": "小兰",
      "age": 15,
      "sex": "男"
    },
    {
      "id":10003,
      "name": "小红",
      "age": 14,
      "sex": "男"
    }
  ]
}

Ajax 模板引擎 underscore.js

模板引擎

underscore.js 表格渲染

猜你喜欢