工作笔记一——杂项
近期做的项目中遇到一些棘手的问题，解决的过程用到很多知识，在此记下主要的问题与解决方法。
页面功能介绍：获取五张表格的大量数据（大概有几千条记录），然后到前台显示在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;
}
