五、（2）Ajax与前端模板

Ajax与前端模板

MockJS实现前后端分离

MockJS简介

优点：

(一) 前后端分离：让前端攻城师独立于后端进行开发。
(二) 增加单元测试的真实性：通过随机数据，模拟各种场景。
(三) 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
(四) 用法简单：符合直觉的接口。
(五) 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
(六) 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

使用：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/mockjs.js"></script>
</head>
<body>
<script>
    //需求: 模拟一组用户数据的信息
    //服务器API的数据
    let data=Mock.mock({
        //随机生成1-10之间的list
        "list|1-10":[
            {
                "name":"@cname",
                "age|18-28":0,
                "sex|1":["男","女"],
                "hobby|+1":["IT","跳","唱歌","游戏"],
                "idCard":"@id",
                "email":"@email"
            }
        ]
    });
    console.log(data)
</script>
</body>

Mockjs结合Ajax的使用

基本使用：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/mockjs.js"></script>
    <script src="../js/jquery.js"></script>
</head>
<body>
<script>
    let data=Mock.mock("hdy,ph","get",{
        //随机生成1-10之间的list
        "list|1-10":[
            {
                "name":"@cname",
                "age|18-28":0,
                "sex|1":["男","女"],
                "hobby|+1":["IT","跳","唱歌","游戏"],
                "idCard":"@id",
                "email":"@email"
            }
        ]
    });
    $.ajax({
        url:"hdy.php",
        dataType:"json",
        type:"get",
        success:function (data) {
            console.log(data)
        }
    });
</script>
</body>

表格渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/mockjs.js"></script>
    <script src="../js/jquery.js"></script>
    <style>
        table{
            width: 800px;
            text-align: center;
            border-collapse: collapse;
        }
        table tr td{
            border: red 1px solid;
        }
    </style>
</head>
<body>
<table>
    <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>身份证</th>
        <th>爱好</th>
        <th>邮箱</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<script>
    let data=Mock.mock("hdy.php","get",{
        //随机生成1-10之间的list
        "list|1-30":[
            {
                "name":"@cname",
                "age|18-28":0,
                "sex|1":["男","女"],
                "hobby|+1":["IT","跳","唱歌","游戏"],
                "idCard":"@id",
                "email":"@email"
            }
        ]
    });

    $.ajax({
        url:"hdy.php",
        dataType:"json",
        type:"get",
        success:function (data) {
            let result = '';
            data.list.forEach(function (item) {
                result+=`<tr>
                        <td>${item.name}</td>
                        <td>${item.sex}</td>
                        <td>${item.age}</td>
                        <td>${item.idCard}</td>
                        <td>${item.hobby}</td>
                        <td>${item.email}</td>
                    </tr>`
            });
            $("tbody").html(result);//渲染到列表
        }
    });
</script>
</body>
</html>

模板的概念

　　模板通常是指将一个事物的结构规律予以固定化、标准化，它体现的是结构形式的标准化。今天我们说的模板是指WEB前端模板，将HTML网页划分为固定结构与数据。

前端模板引擎作用：动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等。

artTemplate模板

概念：artTemplate模板是新一代高性能 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

　　模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的难点，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

javascript模板引擎基本原理

　　虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。

模板的基本使用：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/template-web.js"></script>
</head>
<body>
<div id="box"></div>
<!--    编写模板-->
    <script type="text/html" id="temp">
        <h1>{{value}}</h1>
        <p>{{name}}}</p>
        <span>{{age}}}</span>
        <div>{{hobby}}}</div>
    </script>

    <script>
        let data={
            value:"123",
            name:"hdy",
            age:23,
            hobby: "eat"
        };
        //渲染模板
        let template1 = template("temp",data);
        //渲染到页面
        document.getElementById("box").innerHTML=template1;
    </script>
</body>

性能：模板引擎渲染的时候依赖 Function 构造器实现，Function 与 eval、setTimeout、setInterval 一样，提供了使用文本访问 javascript 解析引擎的方法，但这样执行 javascript 的性能非常低下。
调试：由于是动态执行字符串，若遇到错误调试器无法捕获错误源，导致模板 BUG 调试变得异常痛苦。在没有进行容错的引擎中，局部模板若因为数据异常甚至可以导致整个应用崩溃，随着模板的数目增加，维护成本将剧增。

artTemplate 高效原因：

预编译：artTemplate 的编译赋值过程是在渲染之前完成。artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部。
更快的字符串相加方式：artTemplate 根据 javascript 引擎特性采用了两种不同的字符串拼接方式。

artTemplate模板语法

模板语法：artTemplate有两个版本的模板语法可以选择：简洁语法和原生语法。

简洁语法

1）引用简洁语法的引擎文件，例如：<script src="template.js"></script>

2）表达式：{{ 变量 }} 符号包裹起来的语句则为模板的逻辑表达式。

3）输出表达式：{{content}}

4）条件表达式

{{if admin}}
    <p>admin</p>
    {{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

5）遍历表达式：无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}
//亦可以被简写：
{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}

6）模板包含表达式：包含表态式主要用于嵌入子模板。

{{include 'template_name'}}
//子模板默认共享当前数据，亦可以指定数据：
{{include 'template_name' news_list}}

//简洁语法简单实用，利于读写
{{if admin}}
    {{include 'admin_content'}}
    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

原生语法

1）引用引擎，例如：<script src="template-native.js"></script>

2）表达式：<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。

3）输出表达式：<%=content%>

4）逻辑表达式

<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
    <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>

5）模板包含表达式

//用于嵌入子模板。
<% include('template_name') %>
//子模板默认共享当前数据，亦可以指定数据：
<% include('template_name', news_list) %>

模板快速上手

模板编写及渲染

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/template-web.js"></script>
</head>
<body>
<div id="box"></div>
<!--    编写模板-->
    <script type="text/html" id="temp">
        <h1>{{value}}</h1>
        <p>{{name}}}</p>
        <span>{{age}}}</span>
        <div>{{hobby}}}</div>
    </script>

    <script>
        //渲染列表
        let data={
            value:"123",
            name:"hdy",
            age:23,
            hobby: "eat"
        };
        //渲染模板
        let temp = template("temp",data);
        //渲染到页面
        document.getElementById("box").innerHTML=temp;
    </script>
</body>

template渲染条件控制

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/template-web.js"></script>
</head>
<body>
<div id="box"></div>
<!--    编写模板-->
    <script type="text/html" id="temp">
<!--        流程控制语句-->
        {{if score>=85}}}
            <p>成绩优秀</p>
        {{else if score>=75}}
            <p>成绩中等</p>
        {{else if score>=60}}
            <p>成绩合格</p>
        {{else}}
            <p>成绩不合格</p>
        {{/if}}
    </script>
<script>
    //渲染列表
    let p=template("temp",{
       score :40
    });
    document.getElementById("box").innerHTML=p;
</script>
</body>

template循环语句

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/template-web.js"></script>
</head>
<body>
<div id="box"></div>
<!--编写模板-->
<script id="temp" type="text/html">
    {{each list value}}
        <p>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
            <span>{{value.sex}}</span>
        </p>
    {{/each}}
</script>

<script>
    //渲染模板
    let data={
        list:[
            {
                name:"张三丰",
                age:200,
                sex:"男"
            },
            {
                name:"张无忌",
                age:20,
                sex:"男"
            },
            {
                name:"花千骨",
                age:200,
                sex:"女"
            }
        ]
    };
    let result=template("temp",data);
    //渲染到页面
    document.getElementById("box").innerHTML=result;
</script>
</body>

mock和Template和ajax综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/template-web.js"></script>
    <script src="../js/mockjs.js"></script>
    <script src="../js/jquery.js"></script>
    <style>
        table {
            width: 800px;
            text-align: center;
            border-collapse: collapse;
        }
        table tr td {
            border: red 1px solid;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>身份证</th>
    <th>爱好</th>
    <th>邮箱</th>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tbody>
</table>
<!--编写模板-->
<script type="text/html" id="temp">
    {{each list val}}
    <tr>
        <td>{{val.name}}</td>
        <td>{{val.sex}}</td>
        <td>{{val.age}}</td>
        <td>{{val.idCard}}</td>
        <td>{{val.hobby}}</td>
        <td>{{val.email}}</td>
    </tr>
    {{/each}}
</script>

<!--渲染模板-->
<script>
    let data = Mock.mock("hdy.php", "get", {
        //随机生成1-10之间的list
        "list|1-30": [
            {
                "name": "@cname",
                "age|18-28": 0,
                "sex|1": ["男", "女"],
                "hobby|+1": ["IT", "跳", "唱歌", "游戏"],
                "idCard": "@id",
                "email": "@email"
            }
        ]
    });

    $.ajax({
        url: "hdy.php",
        dataType: "json",
        type: "get",
        success: function (data) {
            //渲染模板
            let ps = template("temp", data);
            $("tbody").html(ps);//渲染到列表
        }
    });
</script>
</body>
</html>

练习

1. 使用mockJS模拟数据，ajax请求数据渲染。
2. 使用ajax请求数据，结合artTemplate渲染。

面试题

1. 前端模板如何与 AJAX结合使用？

posted @ 2021-04-29 18:21 全村的希望、阅读(145) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码