第七节：前端写法全面升级和重新构建封装(结合ES6-ES11语法)
一. 升级1
1. async+await 异步编程
(1). 首先利用Promise封装ajax方法
//ajax-Promise模式【异步】（自定义异常调用的时候写catch） ajaxAsync(type, url, data, funSuc, funErr) { return new Promise((funSuc, funErr) => { $.ajax({ type: type, url: url, beforeSend: function(xhr) { xhr.setRequestHeader("X-Requested-With", 'XMLHttpRequest'); xhr.setRequestHeader("auth", myUtils.sessionGet('token')); }, cache: false, dataType: 'JSON', data: data, success: function(data) { funSuc(data); }, timeout: 120000, //当安全校验未通过的时候进入这里 error: function(xhr) { if (typeof funErr == "function") { funErr(xhr); //用于需要手动写回调 } if (xhr.status == 401) { var errorMsg = xhr.responseText; // console.log(errorMsg); //目前401统一退回登录页，暂未处理自动刷新机制 myUtils.alertMsg(errorMsg, "提示", function() { //以下地址在生产环境中需要统一改为："/loginIndex.html?Msg=" + errorMsg; var baseUrl = `/loginIndex.html?Msg=${errorMsg}`; //生产环境 // var baseUrl = `/ShipFrontSolution/loginIndex.html?Msg=${errorMsg}`; //开发环境 if (window != top) { top.location.href = baseUrl; } else { window.location.href = baseUrl; } }); } } }) }); },
(2). 利用async+await进行调用
async loginEvent() { let d = await myUtils.ajaxAsync('post', CheckLoginUrl, { userAccount: userAccount, passWord: passWord }); if (d.status == "ok") { //存放到本地缓存中 myUtils.sessionSet("token", d.data); myUtils.sessionSet("userAccount", userAccount); window.location.href = 'index.html'; //后台主页 } else { $('#j_text').html("*" + d.msg); } }
(3). 如果要自定义异常，不走封装的统一异常，则要后面加catch
let d = await myUtils.ajaxAsync('post', CheckLoginUrl, { userAccount: userAccount, passWord: passWord })
.catch((e)=>{
console.log('我是自定义异常')
});
2. 模板字符串
业务背景：操作一列通常会有：编辑、删除等等操作，可以直接调用函数，直接传值。
旧：全靠+号拼接
formatter: function(value, row, index) { var rowStr = JSON.stringify(row).replace(/"/g, '"'); var strHtml = '<div class="tablerow">' + '<span class="btn height28" onclick="pageUtil.delRoleOne(\'' + row.id + '\')">删除</span>' + '<span class="btn height28" onclick="pageUtil.editRole(\'' + rowStr + '\')">编辑</span>' + '<span class="btn height28" onclick="pageUtil.setPermission(\'' + row.id + '\')">设置权限</span>' + '</div>'; return strHtml; }
新：
formatter: function(value, row, index) { var rowStr = JSON.stringify(row).replace(/"/g, '"'); var strHtml = `<div class="tablerow"> <span class="btn height28" onclick="pageUtil.delRoleOne('${row.id}')">删除</span> <span class="btn height28" onclick="pageUtil.editRole(${rowStr})">编辑</span> <span class="btn height28" onclick="pageUtil.setPermission('${row.id}')">设置权限</span> </div>`; return strHtml; }
PS：新写法的几点说明
(1). onclick中方法的调用仍然需要用""包裹。
(2). 传递的参数如果是整型，可以直接${row.id}，如果是字符串，需要用''包裹，如：'${row.id}'
(3). editRole中接收到的rowStr，是一个json对象，不用在转换。
3. map方法+箭头函数替代for循环
业务背景：选择多行，进行删除，需要把多行的对象，然后把每个对象中id变量存放到一个数组里。
旧：for遍历
var nodes = dg.datagrid('getSelections'); var delIds = []; if (nodes.length <= 0) { myUtils.messagerAlert('提示', '请选择要删除的用户信息！'); return; } else { for (var i = 0; i < nodes.length; i++) { delIds[i] = nodes[i].id; } }
新：map
var nodes = dg.datagrid('getSelections'); if (nodes.length <= 0) { myUtils.messagerShow('请选择要删除的用户信息！'); return; } //简化1 // var delIds = nodes.map(function(item) { // return item.id; // }) //简化2（引入箭头函数） var delIds = nodes.map(item => item.id);
4. Object属性简洁表示法
Object中声明函数属性可以省略function
旧：
var mainUtil = { //0. 初始化所有信息 init: function() { this.initBasic(); this.initTapEvent(); }, //1. 初始化基本信息 initBasic: function() { //1 初始化主题样式 myUtils.initTheme(); //2 初始化数据表格 pageUtil.loadGird(); }, };
新：
var mainUtil = { //0. 初始化所有信息 init() { this.initBasic(); this.initTapEvent(); }, //1. 初始化基本信息 initBasic() { //1 初始化主题样式 myUtils.initTheme(); //2 初始化数据表格 pageUtil.loadGird(); }, };
二. 升级2
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
