artTemplate模板引擎及ajax封装

模板引擎

模板引擎介绍

客户端中拿到请求的数据过后最常见的就是把这些数据呈现到界面上。

如果数据结构简单，可以直接通过字符串操作（拼接）的方式处理，但是如果数据过于复杂，字符串拼接维护成本太大，就不推荐了。

模板引擎：

artTemplate：https://aui.github.io/art-template/

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易更高效的将数据渲染到HTML字符串中。

使用模板引擎步骤

准备一个存放数据的盒子（不是必须的）
引入template-web.js文件
定义模板（具体语法可以去官网查看），一定要指定script的id和type属性
调用template函数，为模板分配数据，template函数有两个参数一个返回值
1. 参数1：模板的id
2. 参数2：分配的数据，必须是一个JS对象的形式
3. 一个返回值：是数据和模板标签组合好的结果
将 “拼接” 好的结果放到准备好的盒子中（不是必须的，console出来也可以看结果）

<div id="content"><!-- 准备一个存放数据的位置 -->
</div><!-- 1. 引入template-web.js -->
<script src="/template-web.js"></script><!-- 2. 定义模板（注意script标签的id和type必须指定） -->
<script id="test" type="text/html"><h2>{{data}}</h2>
</script><script>// 3. 替换模板// test对应上面script标签的id// data对应上面script标签中使用的$datavar html = template('test', {data: 'hello world'});// 4. 将替换好的html放到指定位置document.getElementById('content').innerHTML = html;
</script>

定义模板时的script标签一定好指定id和type

tempalte函数语法：var html = template(模板id, Object);

模板语法

输出普通数据（字符串、数值等）

// 模板写法
{{var}}// template函数写法
var html = template('id', {var: 'hello world'
});

条件

// 模板写法
{{if age > 18}}大于18
{{else}}小于18
{{/if}}// template函数写法
var html = template('id', {age: 20
});

循环

// 模板写法
{{each arr}}{{$index}} -- 数组的下标{{$value}} -- 数组的值
{{/each}}// template函数写法
var html = template('id', {arr: ['apple', 'banana', 'orange']
});

案例中使用模板引擎处理响应数据

<!-- 引入template-web.js -->
<script src="/template-web.js"></script><!-- 定义模板 -->
<script id="data" type="text/html">{{each arr}}<li class="media"><img class="mr-3" src="avatar.png" alt=""><div class="media-body"><h4>{{$value.name}}</h4><p>{{$value.content}}</p></div></li>{{/each}}
</script>

xhr.onreadystatechange = function () {if (this.readyState === 4) {// 完全接收到服务器返回的数据var data = this.responseText;// 将JSON格式的数据，转换成JS数据data = JSON.parse(data);// 使用模板引擎，不用拼接字符串了var html = template('data', {arr: data});// 把处理好的html放到ul中document.getElementById('messages').innerHTML = html;}
};

封装

自己封装ajax函数

前面发送ajax请求的时候，总是要写大量重复的代码，用起来非常麻烦，为了简化ajax的使用，自己封装一个函数。

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。

/*** 发送一个 AJAX 请求* @param  {String}   url    请求地址* @param  {String}   method 请求方法* @param  {Object}   params 请求参数* @param  {Function} done   请求完成过后需要做的事情（委托/回调）*/
function ajax (method, url, params, done) {// 统一转换为大写便于后续判断method = method.toUpperCase()// 对象形式的参数转换为 urlencoded 格式var queryArray = []for (var key in params) {queryArray.push(key + '=' + params[key])}var queryString = queryArray.join('&')var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')xhr.onload = function () {done(this.responseText);};// 如果是 GET 请求就设置 URL 地址 问号参数if (method === 'GET') {url += '?' + queryString}xhr.open(method, url)// 如果是 POST 请求就设置请求体var data = nullif (method === 'POST') {xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')data = queryString}xhr.send(data)
}// 测试
ajax('get', '/query-get', { id: 123 }, function (data) {console.log(data)
})ajax('post', '/query-post', { foo: 'posted data' }, function (data) {console.log(data)
})

委托：将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

artTemplate模板引擎及ajax封装相关推荐

Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
在 Express中配置使用 art-template 模板引擎 --- express-art-template
1. 模板引擎为了使 art-template模板引擎能够更好地和Express框架配合,模板引擎在原art-template模板引擎的基础上封装了 express-art-template 安装 ...
Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）
一.服务端渲染相关的概念什么是渲染? 例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据,然后将数据通过模板绑定语法绑定到页面中,最终呈现给用户. 数据: 模板: 渲染(数据+模板)结 ...
requirejs整合art-template模板引擎
相关官网 requirejs官网 art-template模板引擎官网目录结构文件目录介绍: domReady.js /用于暂停上层应用的执行,直到DOM准备好再进行查询/修改(requirej ...
利用模板引擎配合ajax进行数据的导入
1. 必须要安装环境才能查看,比如Appserv.利用模板引擎配合ajax进行数据的导入. 2. 在本人的github上有完整的代码,本人的github地址:https://github.com/hu ...
Koa中使用art-template模板引擎，以及如何接受post请求等
直接上代码,每个代码的作用都有注释: 实现了以下功能: 1.koa中如何使用路由 2.koa中如何使用art-template模板引擎 3.koa中如何使用koa-static解析静态文件 4.koa ...
art-template模板引擎详解
1. 模板引擎 art-template中文文档:https://www.kancloud.cn/lanju/art-template/1500276 1.1 Ajax 项目中存在的问题数据和HTM ...
前端开发--art-template模板引擎及实现原理
#博学谷IT学习技术支持# 目录简介安装使用步骤编辑 art-template标准语法值输出原文输出条件输出循环输出过滤器模板引擎的实现原理 1.基本语法 2.分组 3.字符串的 ...
artTemplate模板引擎的源码拜读
最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到 ...