模板介绍

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——模板引擎的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. 第115天：Ajax 中artTemplate模板引擎（一）

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

  5. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  6. Ajax概述，封装以及联合模板引擎进行数据交互

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...

  7. AJAX里使用模板引擎

    一.概述: 处理响应数据渲染可以使用模板引擎(实际上就是一个API,目的是更容易的将数据渲染到HTML中) 目前市面上有许多模板引擎,可以参考 推荐使用artTemplate,它采用作用域预声明的技术 ...

  8. 浅谈 Web 中前后端模板引擎的使用

    前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...

  9. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

随机推荐

  1. Mysql 练习题 及 答案

    --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表  Course(C,Cname,T ...

  2. 统计单词个数（codevs 1040）

    题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...

  3. centos7 安装mongodb3.4 及用户管理

    https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/1.semanage command not found yum ...

  4. Ubuntu 16.04下使用gcc输出汇编的.0文件为可执行文件时出现：`_start'被多次定义

    错误如下: `_start'被多次定义 /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:(.text+0x0):第一次 ...

  5. Unity uGui RawImage 渲染小地图

    制作类似 RPG 游戏时,可能会须要显示小地图. 小地图的制作一种方式是用还有一个摄像机来渲染到一张纹理上.实时显示到UI界面. 以Unity 5.0 的 UI 系统为例: 在地图正上方放置一个摄像机 ...

  6. jquery注冊文本框获取焦点清空,失去焦点赋值

    在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...

  7. LeetCode 83. Remove Duplicates from Sorted List （从有序链表中去除重复项）

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  8. shell 脚本大文件处理

    shell  脚本大文件处理 字符串处理 s='{"_id":{"$oid":"59b73d80930c17474f9f050d"},&qu ...

  9. 技术架构model

  10. Api基类

    基类 class BaseController extends Controller{ public $outData = ['code'=>0,'msg'=>'ok']; public ...