第七节:前端写法全面升级和重新构建封装(结合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, '&quot;');
                                            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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权利。
 
posted @ 2021-06-24 11:36  Yaopengfei  阅读(137)  评论(1编辑  收藏  举报