关于最近接触的前端js已经jquery和常用模板引擎

js

一般我们使用js来做一些动态的数据处理，比如和后台接口对接获取数据渲染到页面、对一些div的样式进行动态变化等等
在这里我主要记录一下对数据的处理。
ajax
与后台交互非常好用，大致格式为：

$.ajax({
        url: '###',
        type: 'POST', //或者GET
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(obj),  //obj为一个对象
        success: function (data) { 
        }
});

这是应对与后台需要接受一个json格式的数据的交互方式，在平常使用中较为广泛的使用，返回的data便是接口会返回的数据，如果某个接口并不需要传值我们可以不写data以及dataType等一些与前端传值到后端有关的属性。

XMLHttpRequest
在进行文件下载的时候，并且使用二进制流的形式进行下载，而我们需要使用浏览器下载，也就是服务器将二进制流文件发给浏览器，浏览器出现下载选择文件存放位置的窗口这种效果，ajax提供的交互方式存在一定的问题，这个时候我们就要使用ajax2的方式，大致格式为：

let request = new XMLHttpRequest();
request.open('POST', 这里写文件下载的接口地址已经需要传递的值，例如：localhost:8080/file/download?filename="文件.txt", true);post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
request.responseType = 'blob'
request.setRequestHeader('Cache-Control', 'no-cache');
request.setRequestHeader("Content-type", "application/json");
request.onreadystatechange = function(res) {
	if (request.readyState == 4) {
		if (request.status == 200) {
		//如果浏览器是ie内核的
			if (window.navigator.msSaveOrOpenBlob) {
				navigator.msSaveBlob(request.response, name);
			} else {//如果是chrome、Firefox等
				let url = window.URL.createObjectURL(request.response);
				let downloadElement = document.createElement("a");
				downloadElement.style.display = "none";
				downloadElement.href = url;
				downloadElement.download = name;
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement);
				window.URL.revokeObjectURL(url);
			}
		}
	}
}
//obj为需要传到后台接口的值所组成的一个对象
request.send(obj);

这个格式只需要修改obj和接口就可以直接使用。
有时候ajax发送后进行处理的方式是一样的，比如我们在做一个后天管理系统的时候，每个菜单点开都会有一个展示所有数据的一个接口，此时我们可以重写ajax方法。
自定义ajaxPost已经ajaxGet方法

 // RequestBody接收 async(是否异步)
 ajaxPost: function ajaxPost(allData) {
       $.ajax({
           url: allData.url,
           type: "post",
           headers: {
               Accept: "application/json; charset=utf-8"
           },
           // async: allData.async,
           contentType: "application/json; charset=utf-8",
           data: JSON.stringify(allData.data),
           success: allData.success,
           complete: function (XMLHttpRequest) {
           },
           error: function (data, status, e) {
               alert("错误！请检查数据是否有误！");
           }
       });
   },

使用的时候也比较方便：

ajaxPost({
		url : 数据接口,
		data : obj, //包含需要传递的值的对象，无需json格式处理
		success : function(data) {
		}
});

ajaxGet和ajaxPost类似，不在赘述

说完数据接受，接下来就是数据渲染：

jquery
常用的有：

 let html=`<tr><th>所属地区</th><td><span>${pname}</span></td></tr>`;
  let fmt=`<tr><th>{0}</th><td><span>{1}</span></td></tr>`
  for(let i=0;i<wdata.length;i++){
      let item=wdata[i];
      html+=fmt.replace("{0}",item.ftype).replace("{1}",item.num);
  }
  $("#aaa").html(html);

这里使用的思想为使用占位，然后使用字符串的replace方法进行渲染，这里要注意的是，pname是该方法中已经声明好了的一个成员变量，但是要在这种渲染中使用就需要加上${}包裹住才可以获取到值，而{0},{1}并不需要包裹，只是个人的编码习惯，写什么都可以因为最后都会被replace

Mustache
这是js的一个模板引擎，使用起来也比较方便。
首先需要在html文件中编写模板：

<!--基本的jquery，js都是要引入的，这里只写需要额外引入的-->
<script src="/mystatic/js/plugins/mustache/mustache.js"></script>



	<table id="newsContentFile" class="table table-hover table-bordered text-nowrap">
		<tr>
			<th>操作</th>
			<th>文件名称</th>
			<th>文件大小</th>
		</tr>
		<tbody id="dataTableFile">

		</tbody>
	</table>


<script id="fileDownload" type="text/html">
	{{#list}}
	<tr>
		<td>
			<button type="button" class="btn btn-info btn-sm" >下载</button>&nbsp;
			<button type="button" class="btn btn-danger btn-sm">删除</button>&nbsp;
		</td>
		<td>{{ext}}</td>
		<td>{{size}}</td>
	</tr>
	{{/list}}
</script>

然后再js中使用ajax获取到值，在使用Mustache进行渲染：

var bodyHtmlTemplate = $("#fileDownload").html();
Mustache.parse(bodyHtmlTemplate); // 预编译模板
var bodyHtml = Mustache.render(bodyHtmlTemplate, datas);//datas是已经处理好的一个包含了list对象的一个数组，格式为：
//datas=[list:{ext:,size:}]
$('#dataTableFile').html(bodyHtml);

这样数据就可以渲染进去了，基本上使用这些可以解决很多渲染问题，目前我只接触到了这些方式，后期如果接触了新的再来做记录。

附上Mustache.js下载地址：
Mustache下载地址