今天和几个人聊javascript开发的代码风格和设计,深感时代在变迁,新人的起点总是比老人要高,无需走我们曾经走过的弯路。我这一代人是从jdbc、jsp/servlet、Prototype.js开始编程的,现在的人直接就用Spring、hibernate、jQuery,手快的开始用python\ruby\nodejs。
这个类对我的前端开发生涯具有一定标志性意义,是我在前端开发中第一次用OOP思考,放到今天毫不稀奇,甚至有些笨拙,但还是挺宝贵的一次实践。
//DeductMoney.js
//依赖类库:prototype,buffalo,prototype-window
//服务端需要实现接口:DeductMoneyService
//开发时间:2007-09-04
//作者:tedeyang
/**
* 通用扣款类;
* 扣款流程:
* 1.扣款前首先计算各种扣款明细信息:发送机内码、所属时期和计税金额(或含税金额)给服务端扣款服务接口的DeductMoneyService.calculate()方法.
* 2.返回明细信息,并用回调函数处理。默认的回调函数弹出一个confirm窗口询问是否真正扣款。
* 3.如果上一步的回调函数返回true则进行实际扣款:DeductMoneyService.declare:。
* 4.扣款过程中将出现一个弹出的div层屏蔽用户操作,并每隔一定时间查询扣款状态:DeductMoneyService.queryDeclareState。
* 5.扣款可能有三种结果:失败,成功,超时.分别对应不同的回调函数(可以覆盖默认实现)
* 6.如果离开页面或超时,会调用DeductMoneyService.cancel进行取消操作
*/
var DeductMoney = Class.create();
DeductMoney.version = '1.0';
DeductMoney.Default={
//在得到服务端返回的实际扣款金额后会执行此回调函数.
//参数reply:即buffalo回调的reply
//如果该函数返回false则不会进行申报
afterCalculate : function(reply){
var success = false;
if(!reply.isFault()){
var message = "请确认:\n" +reply.getResult().join("\n");
message += "\n确定要申报吗?";
success = window.confirm(message);
}
return success;
},
//在刷新等待扣款时,如果用户触发了onbeforeunload事件,将执行此函数进行警告.
unload:function(){return "正在扣款中,现在离开本页面将取消扣款";},
//扣款失败后会执行此函数,
//参数result:即buffalo回调的reply.getResult()
declareFailure:function(result){
window.alert("扣款失败!失败原因:"+result.description);
},
//扣款成功后会执行此函数,
//参数result:即buffalo回调的reply.getResult()
declareSuccess:function(result){
window.alert("扣款成功!");
},
//该函数会在超时或用户关闭窗口时执行
cancel:function(){
window.alert("本次扣款操作将被取消!");
Dialog.setInfoMessage("正在取消...");
this.buffalo.async = false;
this.buffalo.remoteCall(
this.serviceName+".cancel",
[this.request_id],
function(reply){
DeductMoney.reply = reply;
}
);
if(!DeductMoney.reply.isFault()){
Dialog.setInfoMessage("已经成功取消了扣款!");
}else{
Dialog.setInfoMessage("取消扣款失败!");
}
}
};
DeductMoney.reply={isFault:function(){return false;}};//临时存放buffalo返回值.
DeductMoney.prototype = {
//构造函数
//buffalo : 将调用的buffalo对象
//serviceName : 要调用的buffalo服务.该服务必须实现一个接口
//paramList : buffalo调用的参数列表.应该有三个参数:[机内码,所属时期,金额]
//optionList :可选,JSON对象,可以覆盖默认的几个参数和回调函数.
initialize: function(buffalo,serviceName,paramList,optionList){
this.startTime = 0; //unit:ms
this.buffalo = buffalo;
this.serviceName = serviceName;
this.paramList = paramList;
this.replyCallback = {};
this.optionList = {
timeout:15,//,超时,秒
refresh:5,//刷新,秒
afterCalculate:DeductMoney.Default.afterCalculate,
whenExitPage:DeductMoney.Default.unload,
declareFailure:DeductMoney.Default.declareFailure,
declareSuccess:DeductMoney.Default.declareSuccess,
cancel:DeductMoney.Default.cancel
};
Object.extend(this.optionList, optionList || {});
},
_calculate:function(){//预处理。 回调可以为空,这样会调用默认的回调函数
this.buffalo.async = false;
this.buffalo.remoteCall(
this.serviceName+".calculate",
this.paramList,
function(reply){
DeductMoney.reply = reply;
}
);
var success = this.optionList.afterCalculate(DeductMoney.reply);
if(success){
this._declare();
}
},
_declare:function(){//申报
this.buffalo.async = false;
this.buffalo.remoteCall(
this.serviceName+".declare",
this.paramList,
function(reply){
DeductMoney.reply = reply;
}
);
if(!DeductMoney.reply.isFault()){
this._wait(DeductMoney.reply.getResult());//查询id指定的扣款请求
}
},
_wait :function (id){
window.onbeforeunload = this.optionList.whenExitPage;
window.onunload = this.optionList.cancel.createDelegate(this);
this.startTime = new Date().getTime();
Dialog.info("正在扣款中...<br>如果超过"+this.optionList.timeout+"秒还没有成功扣款,该笔扣款将被取消。" ,{className:"alphacube",width: 300, height:120,showProgress:true});
this.request_id = id;
this._checkBankKoukuan();
},
//循环查询扣款状态
_checkBankKoukuan :function () {
//查询是否已经扣款,使用ajax同步模式.
//根据
this.buffalo.async = false;
this.buffalo.remoteCall(
this.serviceName+".queryDeclareState",
[this.request_id],
function(reply){
DeductMoney.reply = reply;
}
);
if(!DeductMoney.reply.isFault()){
var passedTime = Math.round((new Date().getTime()-this.startTime)/1000);
var flag = DeductMoney.reply.getResult().code;
//如果扣款成功了.关闭提示,并调用相应的回调函数
if(flag=='0000'){//这个代码的意义参见扣款服务为表d_declare打的标记
window.onbeforeunload = null;
window.onunload = null;
this.optionList.declareSuccess(DeductMoney.reply.getResult());
Dialog.closeInfo();
}
//扣款失败,返回了一些失败原因
else if(!(flag == null) && !(flag == '')){
window.onbeforeunload = null;
window.onunload = null;
this.optionList.declareFailure(DeductMoney.reply.getResult());
Dialog.closeInfo();
}
//超时,向后台发送一个超时标志.
else if( passedTime > this.optionList.timeout){
this.optionList.cancel.createDelegate(this)();
Dialog.closeInfo();
window.onbeforeunload = null;
window.onunload = null;
}
//扣款还没有成功,也没有返回失败信息,并且尚未超时————继续轮询
else{
Dialog.setInfoMessage("正在扣款中,已经等待了"+passedTime+"秒;<br>如果超过"+this.optionList.timeout+"秒还没有成功扣款,该笔扣款将被取消。");
var f = this._checkBankKoukuan.createDelegate(this);
setTimeout(f, this.optionList.refresh * 1000);
}
}
},
//开始运行,这是唯一需要调用的方法.
start:function(){
this._calculate();
}
};
分享到:
相关推荐
在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所...
JS Beauty 是一款 Javascript 美化工具,它具有美化,净化,压缩和解压缩 Javascript 代码等功能: 1. 美化:将混乱的 Javascript 代码格式化为优美的带缩进的格式,适合阅读和修改。 2. 净化:去掉 Javascript ...
javascript代码自动生成.ra
JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...
javascript特效代码大全 javascript特效代码大全 javascript特效代码大全
JavaScript经典代码收集,个人收集的经典常用的JavaScript代码
Javascript代码集Javascript代码集Javascript代码集Javascript代码集
资源名称:编写可靠的JAVAscript代码 测试驱动开发JAVAscript商业软件内容简介:《编写可靠的Javascript代码 测试驱动开发Javascript商业软件》分为5个部分:第Ⅰ部分“奠定坚实的基础”...
常用经典Javascript代码 做网页的朋友一定要看哦
javascript代码,有关JavaScript编程的代码,里面包含486个例子
收集的比较全面的脚本语言JavaScript代码大全,值得收藏
javaScript代码开发规范文档
javascript 常用代码大全javascript 常用代码大全javascript 常用代码大全javascript 常用代码大全
javascript代码自动生成javascript代码自动生成javascript代码自动生成javascript代码自动生成javascript代码自动生成javascript代码自动生成
分享一个不错的javascript代码压缩工具,需要安装JAVA环境
用JavaScript写的图片切换代码,绝对实用!!
一些常用的JavaScript代码,全是我工作中的总结
javascript 代码 列子,实现一些常见的效果.
Javascript编程宝典代码 Javascript编程宝典代码 Javascript编程宝典代码 Javascript编程宝典代码
JavaScript常用代码集锦 JavaScript常用代码集锦 JavaScript常用代码集锦