Ajax——模板引擎

模板介绍

1、必要性：ajax请求从服务器接收到大量数据，此时再用普通的字符串拼接是很耗费时间的，这时候模板就有其必要性

2、便利性：插件套用，现在有很多主流的模板插件：BaiduTemplate(百度开发) 、ArtTemplate(腾讯开发)、 velocity.js(淘宝开发) Handlebars

基本逻辑

1、script标签的type类型不能是默认的，改成text/template，这样就可以作为一个模板而不会被执行了

2、读取模板内的innerHTML

3、正则

4、正则中的exec方法不断的验证模板中是否有匹配的数据，()括号中的子项是键

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script type="text/template" id="template">

    <ul>

        <li><%= name %></li>

        <li><%= age %></li>

        <li><%= skill %></li>

    </ul>

</script>

<script>

    var tempStr=document.querySelector("#template").innerHTML;

    var obj={name:'wq',age:17,skill:'eat'};

    var str=fox_template_pro(tempStr,obj);

    document.write(str);

    /*

        str:模板

        obj:准备替换的数据

    */

    function fox_template_pro(str, obj) {

        var reg = /<%=\s*([^%>]+\S)\s*%>/;// 中间的 小括号 可以对 正则 筛选出来的 字符串 再次筛选

        var str = str;// 准备挖好坑的字符串

        var obj = obj;// 准备 用来填坑的 对象

        /*

            第一个 <%= name %> 索引为0

            第二个 name        索引为1

        */

        var result;

        while (result = reg.exec(str)) {

            var key = result[1];// 获取匹配的key

            var value = obj[key];// 通过key获取value

            str = str.replace(result[0], value);// 替换的是<%= name %>

        }

        return str;//执行完毕说明替换完成了

    }

</script>

</body>

</html>

腾讯模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li><%=name%></li>

        <li><%=age%></li>

        <li><%=skill%></li>

        <li>

            <ul>

                <%for (var i = 0; i < food.length; i++) {%>

                     <li><%=food[i]%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var obj = {

        name: 'wq',

        age: 18,

        skill: 'eat',

        food: ['米饭', '土豆丝', '番茄', '花生', '玉米']

    };

    /*

        参数1: 模板ID

        参数2: 替换数据

    */

    var resultStr = template('template',obj);

    document.write(resultStr);

</script>

</body>

</html>

注意事项

1、接收数据单单是数组，必须包裹在对象中传入template方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li>

            <ul>

                <%for (var i = 0; i < info.length; i++) {%>

                <li><%=info[i]%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var ajax = new XMLHttpRequest();

    ajax.open('get','10.php');

    ajax.send();

    ajax.onreadystatechange=function (ev) {

        if (ajax.readyState==4&&ajax.status==200) {

            var arr=JSON.parse(ajax.responseText);

            console.log(arr);

            var obj={info:arr};

            var resultStr=template('template',obj);

            document.write(resultStr);

        }

    }

</script>

</body>

</html>

<?php

  header("content-type:text/html;charset=utf-8");

  echo file_get_contents('files/04.json');

?>

["wq",17,"eat"]

2、接收数据是字符串，可以用[]括起来，然后包裹在对象中传入template方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script src="js/template-native.js"></script>

<script type="text/template" id="template">

    <ul>

        <li>

            <ul>

                <%for (var i = 0; i < info.length; i++) {%>

                <li><%=info[i]['name']%></li>

                <li><%=info[i]['age']%></li>

                <li><%=info[i]['sex']%></li>

                <%}%>

            </ul>

        </li>

    </ul>

</script>

<script>

    var ajax = new XMLHttpRequest();

    ajax.open('get','10.php');

    ajax.send();

    ajax.onreadystatechange=function (ev) {

        if (ajax.readyState==4&&ajax.status==200) {

            var arr=JSON.parse(ajax.responseText);

            console.log(arr);

            var obj={info:[arr]};

            var resultStr=template('template',obj);

            document.write(resultStr);

        }

    }

</script>

</body>

</html>

<?php

  header("content-type:text/html;charset=utf-8");

  echo file_get_contents('files/05.json');

?>

{"name":"zs1","age":,"sex":"nan"}

巴特西

Ajax——模板引擎

最新文章

热门文章