工作笔记一——杂项

近期做的项目中遇到一些棘手的问题，解决的过程用到很多知识，在此记下主要的问题与解决方法。

页面功能介绍：获取五张表格的大量数据（大概有几千条记录），然后到前台显示在table里面，实现行列汇总。页面保存也是要保存这些数据的（几千条）。大概有三个如下的表格保存着大量数据：

1.页面大量计算的解决方案

如果原来页面有默认值，要显示默认值，并且要显示行列汇总。数据少的时候，在前台直接使用jQuery的trigger触发计算是完全可行的，但是数据量稍微多一点，页面就会卡死甚至浏览器会崩溃。所以我采用的解决方案是在前台计算行列的汇总值展示，不用trigger的方式。这里我采用了webworker。

使用方法如下：

            var worker = new Worker("${base.contextPath}/resources/js/cal_job.js");
            //给异步计算传递参数
            worker.postMessage(info);
            //接收到计算后的值的回调
            worker.onmessage = function (evt) {
              //evt.data就是worker计算后的返回数据
             vm.sumData = evt.data;
            }

在计算的cal_job.js里面：

onmessage = function (evt) {
    //前面传过来的参数(info)
    var calcData = evt.data;
    //自己的计算
    //......
   //将计算结果的数据发送回主线程
    postMessage({
        name:'value'
    });
}

这样在主页面拿到计算后的行列汇总值，直接$(element).text(‘xxx’)就可以了。

2.同时调用几个保存接口，都是异步的，如何保证全部保存完后再执行相应的方法

页面涉及到五张表的数据保存，为了提高效率，将这五个实体的保存分别放到各自对应的controller中，然后异步保存。保存之前会有一个layer的loading图表，保存结束后这个图标要消失。这就要涉及捕获全部保存后的时刻了。有一个简单的方法，是采用计数的方式，即先定义一个标记变量=0，在每一个保存成功的回调里面给这个变量+1，然后判断这个变量的值，如果等于5的话就关闭loading的图标。我没采用这种方法，因为比较笨拙。我选择的是Promise对象的all方法。由于Promise在IE上兼容有些问题，可以参考下面第四条。

                        layer.msg('数据保存中...', {icon: 16, time: 0});
                        var promises = [this.saveRe(), this.savePat(), this.saveTrn(), this.saveFB(), this.saveOutsource()];
                        /***把所有的异步请求封装成一个promise对象，针对这个promise进行监听回调，可以保证在保存完成后跳转页面***/
                        Promise.all(promises).then(function (data) {
                            layer.closeAll();
                        }).catch(function () {
                            layer.alert('保存出错');
                        })

3.jQuery事件触发完成后执行某个方法

如果要在trigger('change')之后执行某一方法，要使用Deferred对象来完成。比如我在整个表格都触发了change事件之后，再反转某个标志位，就可以就可以这样做：

                    vm.isInit = true;
                    var df = $.Deferred();
                   //获取要进行change的行
                    var $rows = $('#pat-scroll-tr-0').find('input');
                    //定义一个方法任务
                    var serviceTask = function (dtd) {
                        //在这里触发change事件
                       $rows.trigger('change');
                        dtd.resolve();
                        return dtd.promise();
                    };
                   //在trigger完成后再执行的操作
                  $.when(serviceTask(df)).done(function () {
                        vm.isInit = false;
                    });

4.Promise对象在页面无法使用

Promise对象在IE上不兼容，可以使用polyfill进行转换，简单的解决方法就是在页面上引入cdn的polyfill.js就可以了：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

5.layer控件的弹窗显示小bug

layer控件在火狐上显示的小问题：

在页面上加入以下样式调整即可：

/**解决火狐下的tip显示的bug*/
    .custom-padding > .layui-layer-content {
        padding: 0px;
        padding-left: 20px;
    }

现在就可以正常渲染了：