前端处理较多的逻辑，应该如何优化？

letMeAlone_ 2017-10-23 04:55:34

场景：物流行业使用PDA扫描标签，需要对标签号进行查询比对，涉及到了三张表。因为如果每次都请求服务器的话，感觉速度太慢。所以选择一次请求将所有需要的内容都加载到前端。

于是我把数据也分成了三个主要数组进行存储。
但是因为里面涉及比较多的判断条件。不能像sql一样直接一个select语句就查询到想要的结果。只能通过遍历的方式去查找。

需要判断的条件大概有：

1：查找BL表中有没有这个标签
2：找到这个标签后去找KL中对应的库存
3：如果库存对应的数量较多（超过N件，不希望每一件都扫描，直接全部扫描完成）
4：判断有没有装车记录，如果有提示过装车，下一次扫描同一库存就不要再提示
等等

其中可能嵌套了很多循环，请问有没有什么方式能更好的解决这个问题，因为我必须不断去遍历这些数据，写着写着自己都很容易懵逼

以下是部分代码，写的很烂，求指教,让我摆脱苦海，我第一次在前端做这么多的逻辑判断



$.each(bl, function(i) {



				//{bill_no:136553200001, stock_type:发货库存, yd_no:1365532, qty:4}

				if(bl[i].bill_no == $(_t).val()) {

					hasbarcode = true;

					curYDNO = bl[i].yd_no;



					//每次扫描标签判断对应的运单数量是否大于20件，如果是执行一件装车操作

					$.each(kla, function(y) {

						if(kla[y].yd_no == curYDNO && kla[y].qty >= 4) {

							//先检验是否已经做过一键装车了

							$.each(ol, function(i) {

								if(this.yd_no == curYDNO) {



									if(this.onceFinsh) { //如果已经一键装车了

										plus.nativeUI.toast('已经完成过一键装车，请勿重复装车');

										hasOnce = true;

										onceFinsh = true;

									} else {

										hasOnce = true;

										onceFinsh = false;



									}



								}

							});

							if(!hasOnce) //如果没有提示过一键装车则提示

							{



								plus.nativeUI.confirm('该运单数量超过4件是否一键装车？', function(event) {

									if(event.index == 0) {

										once = true; //选择了一键装车

										//一键装车,检验标签表状态

										$.each(bl, function(i) {

											if(bl[i].yd_no == curYDNO && bl[i].scaned == 0) {

												this.scaned = 1; //标签表 的扫描状态改变

												//添加进扫描表

												main.vueScanList.list.push({

													scanTime: $.fn.getCurDate(),

													scanNo: this.bill_no

												});



											}

										});

										//检验并更改库存表 kucunListAll扫描的件数



										$.each(kla, function(i) {

											if(kla[i].yd_no == curYDNO) {

												this.scanNum = this.qty;



											}

										});

										// 添加进需要一键装车的列表，方便后续操作

										ol.push({

											yd_no: curYDNO,

											onceFinsh: true //表示已经一键装车完成了

										});

										$('#scanInput').val('');



									} else //不一键装车，单独添加

									{

										// 添加进需要一键装车的列表，方便后续操作

										ol.push({

											yd_no: curYDNO,

											onceFinsh: false //表示取消了一键装车，但是需要一件装车需求的

										});

										console.log('标记' + $('#scanInput').val());

										$.each(bl, function(i) {

											if(this.bill_no == $(_t).val() && this.scaned == 0) {

												main.vueScanList.list.push({

													scanTime: $.fn.getCurDate(),

													scanNo: $(_t).val()

												});



												scaned = true;

												bl[i].scaned = '1';

												if(scaned) {

													$.each(kla, function(y) {

														if(kla[y].yd_no == curYDNO) {

															kla[y].scanNum++;

														}

													});



												}



											}



										});

										$(_t).val('');

									}

								});



							} else if(hasOnce && !onceFinsh) {



								$.each(bl, function(i) {

									if(this.bill_no == $(_t).val() && this.scaned == 0) {

										main.vueScanList.list.push({

											scanTime: $.fn.getCurDate(),

											scanNo: $(_t).val()

										});



										scaned = true;

										bl[i].scaned = '1';

										if(scaned) {

											$.each(kla, function(y) {

												if(kla[y].yd_no == curYDNO) {

													kla[y].scanNum++;

												}

											});



										}

										plus.nativeUI.toast('一键装车请点击右上角');



									} else if(this.bill_no == $(_t).val() && this.scaned == 1) {



										plus.nativeUI.toast('该标签已扫描');



									}



								});

								$(_t).val('');

							}							



						}



					});

				}

			});