--流程简化及核心代码
接上文的流程分析，下面是订空车页面中，正常的订空车流程对应的完整时序图（笔者第一次画时序图，老费劲了……接受拍砖）：
从中可以看出，在一次完整的订车过程中，用户与页面的交互共有五个点，分别是：
- 触发预约列表
- 选择预约项
- 修改、保存订车信息
- 显示和提报订车信息
- 确认和提交。
页面与后台服务器的交互共有五次，分别是：
- 获取预约列表
- 获取装卸车地点等信息（这一步单独存在，很不解）
- 停限装校验
- 保存订车信息（获取订车预约号）
- 提交预约号。
且不论这么麻烦冗余的步骤是否合理，我们可以看出用户与页面交互的几个点中，第三个点最耗时，且通常必不可少；而其他的点都可以通过javascript自动化完成或跳过。因此，我们的插件应该只有一次输入过程：提前确定选择预约列表中的第几项，并预先填写一些需要修改的订车信息项目，例如装车日期、订车数、货区货位等，然后把其余的步骤都自动化完成！
我们插件的核心代码，应该透过现有页面的限制，打破“用户<-->页面”、“页面<-->服务器”这两种固有的交互模式，实现用户与服务器之间一步到位的交互，而页面上的表单只起辅助作用。我们的整个流程简化为：
- 在表单中填写必要的信息（装车时间等）
- 获取预约列表、自动选择一项
//自动获取预约信息，然后填表 function getPreserved(){ var d = new Date(); d.setDate(d.getDate() + 1); $.getJSON('/gateway/hydzsw/Dzsw/action/ZcrbjhAction_getYsxq',{ q:'', // limit:50, // timestamp:1394861501408, zcrq:d.format('yyyy-MM-dd')}, function(data, textStatus,jqXHR){ if(data.length&& data.length > 0){ resultFunc(data[data.length-1]);//取最后一项 } }); } - 填充表单，即上述代码中取预约列表的最后一项，调用resultFunc函数来填充表格。其中resultFunc函数是在订空车页面的源码中定义的。如果第一步中填写的信息在这个函数中被覆盖了，我们就修改这个函数，删除可能导致覆盖的代码。
functionresultFunc(item){ if (item) { $("input[name='keyword']").val(''); var sycs = item.PZCS - item.JDZC4 - item.YPWZ - item.YQWP - item.FACS; $("input[name='po.xqslh']").val(item.XQSLH); $("input[name='po.pzycfh']").val(item.PZYCFH); $("input[name='fzhzzm']").val(item.FZHZZM); $("input[name='fjm']").val(item.FJQC); $("input[name='fhdwmc']").val(item.FHDWMC); $("input[name='dzhzzm']").val(item.DZHZZM); $("input[name='djm']").val(item.DJQC); $("input[name='shdwmc']").val(item.SHDWMC); $("input[name='hzpm']").val(item.HZPM); $("select[name='po.qqcz']").val(item.CZ); $("input[name='po.qqcs']").val(sycs); $("input[name='yqwp']").val(item.YQWP); $("input[name='ypwz']").val(item.YPWZ); $("input[name='jdzc4']").val(item.JDZC4); $("input[name='po.qqds']").val($("input[name='po.qqcs']").val() * 60); $("input[name='qqcsMax']").val(sycs); $("input[name='po.ifzzjg']").attr("checked", item.IFZZJG == '1'); $("input[name='fztmism']").val(item.FZTMISM); $("input[name='dztmism']").val(item.DZTMISM); // $("input[name='fzyx']").val(item.FZYX); // $("input[name='dzyx']").val(item.DZYX); createZyx(item.PZYCFH); } } - createZyx函数发起了另一个ajax请求来获取装卸车地点等信息并填充表单，蛋疼啊……这个函数也是原页面定义的，我们需要修改一下它，在填充完表单之后直接调用“保存”按钮的事件处理函数来校验表单并保存。我们来看一下“保存”按钮的事件处理函数的定义：
$("#submitBtn").click(function(){ if (validator.form()) { if (Number($("input[name='po.qqcs']").val()) > Number($( "input[name='qqcsMax']").val())) { alert("最大可用车数：" + $("input[name='qqcsMax']").val() + "，所报车数不能超过最大可用车数！"); $("input[name='po.qqcs']").focus(); return false; } if (Number($("input[name='po.qqds']").val()) > Number($( "input[name='po.qqcs']").val()) * 80) { alert("吨数不能超80吨/车！"); $("input[name='po.qqds']").focus(); return false; } else { function save() { var url = $("#uuid").val() == "" ? "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_add" : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_updateForZcrbjh2"; $.ajax({ type : "post", url : url, data : $("#saveForm").serialize(), dataType : "json", error : function(xhr, msg, e) { alert("空车数据保存失败"); mask.hide(); }, success : function(msg) { if (msg.success) { // alert("空车数据保存成功,"+msg["message"]); alert2( "空车数据已成功保存！<br/>您可以在”未报空车查询结果列表“中编辑、打印指定的运单或批量编辑、打印运单，也可凭预约号在车站打印运单。", function() { clearForm(); }); // mask.hide(); } else { alert(msg["message"]); mask.hide(); } } }); } mask.show(); // 停限装校验 $.ajax({ type : "post", url : "/gateway/hydzsw/Dzsw/action/TbInformationRestrictionAction_checkOrder", async : false, data : { fztmism : $("#fztmism").val(), dztmism : $("#dztmism").val(), fzyx : $("#fzyx").val(), dzyx : $("#dzyx").val(), startDate : $("#zcrq").val(), endDate : $("#zcrq").val() }, dataType : "json", error : function(xhr, msg, e) { }, success : function(msg) { if (msg.success) { confirm(msg.message + "<br/>您确认保存数据？", function() { save(); }, function() { mask.hide(); }, '停限装信息提示'); } else { save(); } } }); // 将空车数据以ajax的方式进行提交 saveForm" // action="ZcrbjhAction_add" // document.saveForm.submit(); } } }); - 订空车信息保存成功之后，调用了clearForm函数来刷新“未报空车”列表。我们将刷新列表、选择再提交的繁琐步骤跳过，直接把结果提交！其中的关键参数是上步返回的对象中的uuid属性的值，也就是保存成功的预约空车的编号。
$.ajax({ url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjh", async : true, type : "POST", data : "op=10&uuids=" + param + "&mor_dzsw_security_info=" + securityInfo, success : function(msg) { $.unblockUI(); if (msg.success) { $("#grid").setGridParam({ datatype : "json" }).trigger('reloadGrid'); } if (msg.object) { varerrorText; if (msg.object.BQ) { if (msg.object.ERROR) { errorText = '客户提报预约号为' + msg.object.ERROR + '的单据的时间已超过受理时间,请删除对应单据重新提报'; errorText = errorText + '</br>预约号为' + msg.object.BQ + '的单据需要转为补充需求,您是否同意?'; } else { errorText = '客户提报预约号为' + msg.object.BQ + '的单据需要转为补充需求,您是否同意?'; } confirm( errorText, function() { //alert(msg.object.BQUUID); $.ajax({ type : "post", url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjhBq", data : "op=10&uuids=" + msg.object.BQUUID + "&mor_dzsw_security_info=" + securityInfo, dataType : "json", async : false, error : function(xhr, msg, e) { }, success : function(msg) { if (msg.success) { $("#grid").setGridParam({ datatype : "json" }).trigger('reloadGrid'); } alert("上报" + msg.message); } }); }); } else { errorText = '客户提报预约号为' + msg.object.ERROR + '的单据的时间已超过受理时间,请删除对应单据重新提报'; alert(errorText); } } else { alert("上报" + msg.message); } } });
以上核心代码基本都来自原始的页面，我们将其重新组织了一下，用5个步骤完成了本文开头那个超复杂的时序图完成的工作，OMG！当然有一些步骤还是不能省的，比如表格的校验和错误提示信息，否则提交失败了却不知道原因，岂不是很失败……
当然，虽然核心代码已经完成，但是具体操作时，直接用这些js代码还是存在诸多不便的，尤其是给普通用户使用时，比较麻烦，因此笔者想到了制作一个chrome插件，毕竟chrome内核的浏览器在国内的市场份额还是非常大的，市面上诸多的12306抢票浏览器也都是集成了插件的chrome内核的浏览器嘛。关于插件的开发文档不多，因此编写过程颇费了一番功夫，笔者抽空再把相关内容整理一下。
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
