artTemplate模板引擎及ajax封装

模板引擎

模板引擎介绍

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

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

模板引擎：

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

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

使用模板引擎步骤

1. 准备一个存放数据的盒子（不是必须的）
2. 引入template-web.js文件
3. 定义模板（具体语法可以去官网查看），一定要指定script的id和type属性
4. 调用template函数，为模板分配数据，template函数有两个参数一个返回值
   1. 参数1：模板的id
   2. 参数2：分配的数据，必须是一个JS对象的形式
   3. 一个返回值：是数据和模板标签组合好的结果
5. 将 “拼接” 好的结果放到准备好的盒子中（不是必须的，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标签中使用的$data
    var 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 = null
  if (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)
})

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