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