模板介绍

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. BZOJ(7) 1085: [SCOI2005]骑士精神

    1085: [SCOI2005]骑士精神 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3233  Solved: 1911[Submit][Stat ...

  2. linux下nginx+svn

    http://fengqi.me/unix/23.html 因为没有什么可以定制的, 所以svn直接使用系统自带的包管理软件安装, 以centos系列为例, 命令如下: yum install sub ...

  3. 【CV知识学习】Fisher Vector

    在论文<action recognition with improved trajectories>中看到fisher vector,所以学习一下.但网上很多的资料我觉得都写的不好,查了一 ...

  4. Qt移动应用开发（二）：使用动画框架

    Qt移动应用开发(二):使用动画框架 上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不同分辨率的适应是一个很棘手的问题,除了分辨率不同外,宽高比(aspect ratio)也不 ...

  5. 违章查询免费api接口代码

    能够依据城市+车牌号+发动机号查询违章信息列表. 违章实体类 package org.wx.xhelper.model; /** * 违章实体类 * @author wangxw * @version ...

  6. 我的Go语言学习之旅七：创建一个GUI窗口

    在上次中,刚刚学过了  弹窗效果.这里再接着学习一下怎样创建一个窗口. 还是老路子,先上代码: package main import ( "github.com/lxn/go-winapi ...

  7. Codeforces Round #329 (Div. 2)B. Anton and Lines 贪心

    B. Anton and Lines   The teacher gave Anton a large geometry homework, but he didn't do it (as usual ...

  8. cf 749D Leaving Auction

    Leaving Auction time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. 【转载】同步与异步--阻塞与非阻塞型I/O

    同步阻塞IO 在这个模型中,应用程序(application)为了执行这个read操作,会调用相应的一个system call,将系统控制权交给kernel,然后就进行等待(这其实就是被阻塞了).ke ...

  10. Visual Studio Code配置GitHub（Win7环境）

    一.软件环境说明(演示环境) 1.操作系统:Windows7旗舰版(64bit) 2.Visual Studio Code版本:1.32.3 3.Git版本:2.21.0.windows.1 二.软件 ...