近期做的项目中遇到一些棘手的问题，解决的过程用到很多知识，在此记下主要的问题与解决方法。
页面功能介绍：获取五张表格的大量数据（大概有几千条记录），然后到前台显示在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就可以了：
5.layer控件的弹窗显示小bug
layer控件在火狐上显示的小问题：
在页面上加入以下样式调整即可：
/**解决火狐下的tip显示的bug*/ .custom-padding > .layui-layer-content { padding: 0px; padding-left: 20px; }现在就可以正常渲染了： 