在js里面,对于函数的调用,实际上也是也是面向对象的思路,于是写好js函数,也是考核面向对象设计的能力,同时也必须考虑到如何实现高内聚和低耦合,拿一个例子来说,现在的需求是这样的,实现个投资进度框,就是如图所示:总共分四步来走,第一步“创建订单中”,成功改变提示信息“创建订单成功!”,显示,不成功改变提示信息“创建订单失败!”,显示,依次下去第二步,第三步,第四步!
我的dom结构是这样的:
<!--投资操作进度tip-->
<div class="invest_progress_tip">
<div class="progress_tip_title text-center">
<div class="la-timer la-2x" >
<div></div>
</div>
<span>小羊正在拼命地处理中···</span>
</div>
<div class="progress_tip_content">
</div>
</div>
<!--投资操作进度tip//-->
那就是这样的,我需要做的就是设计一个函数,对其调用,依次传参,然后对其<div class="progress_tip_content"></div>添加dom节点,添加每个实现步骤。那如何设计这个函数勒?刚开始,我是依照三种状态来设计这个函数的,flag为0,1,2。0为初始化,1为成功,2为不成功,于是怎么一个函数就出来:
/*
调用说明
show_p_tip({
step:"createOrder", //步骤名称,名称任意
flag: 0, // 0=状态未显示 1=状态已显示(成功) 2=状态已显示(未成功)
msg:‘正在创建订单··· ‘, //提示信息
is_begin: true, //提示框初始化,用于第一步操作,第一步必须初始化,前提flag必为0
is_success: true, //成功支付的提示(成功支付按钮),用于最后一步成功结果,,前提flag必为1
param: object对象 //如 {is_NoAuth:true, url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘} is_NoAuth必为true 前提flag必为2
});
*/
function show_p_tip(object){
switch(object.flag){
case 0:
if(object.is_begin){
$(".invest_tip .invest_tip_close").removeClass(‘close_window‘);
$(".invest_tip").css(‘z-index‘,9996);
$(".invest_progress_tip").center().fadeIn();
}
$(".invest_progress_tip .progress_tip_content").append(‘<div id="div_‘+object.step+‘"><span id="span_‘+object.step+‘">‘+object.msg+‘</span><i class="p-icon p-1"></i></div>‘);
break;
case 1:
if(object.msg!=‘‘){
$(".invest_progress_tip .progress_tip_content #span_"+object.step).html(object.msg);
}
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").fadeIn();
if(object.is_success){
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_success_result mt15 text-center"><a href="javascript:void(0);" class="invest_result_btn btn btn-primary btn-block">完成支付</a></div>‘);
}
break;
case 2:
if(object.msg!=‘‘){
$(".invest_progress_tip .progress_tip_content #span_"+object.step).html(object.msg);
}
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").addClass(‘p-2‘);
$(".invest_progress_tip .progress_tip_content > div#div_"+object.step+" .p-icon").fadeIn();
if(object.param.is_NoAuth){
var form = createForm(object.param);
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_noauth_tip mt5">点击支付按钮前往<span class="text-primary">一麻袋</span>进行支付操作</div>‘);
$(".invest_progress_tip .progress_tip_content .invest_noauth_tip").append(form);
}
break;
}
if(object.tip_msg&&object.tip_msg!=‘‘){
$(".invest_progress_tip .progress_tip_title .la-timer>div").addClass(‘success‘);
$(".invest_progress_tip .progress_tip_title span").text(object.tip_msg);
}
}
那么可以看出来,使用flag作为参考依据,于是就会出现很多问题,代码出现了很多问题,比如
状态为flag为1,成功的时候,我要求显示”完成支付“的按钮,需要在flag为1的前提下,添加个参数is_success;
状态为flag为0,显示初始化的时候,需要在第一步做些其他操作(初始化),又要传入参数is_begin来保证第一步可以实现某个操作
虽然功能可以实现,但是代码相当冗余,可扩展性不好,相当不智能!
于是另外一种方法出来了,
/*
调用说明
show_p_tip({
action:‘_init‘, //动作名
name: ‘tag1‘, //标识名
msg:‘正在创建订单...‘, //提示信息
status: 1, // 0错误 1正确
form: object对象 //如 {url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘}
});
eg:
show_p_tip({ action:‘_init‘,msg:‘小羊正在疯狂处理中!‘});
show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘正在创建订单...‘});
show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘创建订单成功!‘,status:1});
show_p_tip({ action:‘_tips‘,name:‘tag1‘,msg:‘现金券下单失败!‘,status:0});
show_p_tip({ action:‘_jump‘,form:{url:‘http://www.baidu.com‘, tradeData:‘hahahhaha‘, method:‘post‘}});
show_p_tip({ action:‘_complete‘});
show_p_tip({ action:‘_end‘});
*/
function show_p_tip(object){
switch(object.action){
//初始化
case ‘_init‘:
var msg = object.msg?object.msg:‘小羊正在拼命地处理中!‘;
$(‘.invest_progress_tip‘).attr(‘rel‘,1);
$(‘.invest_progress_tip .progress_tip_title span‘).text(msg);
$(".invest_tip .invest_tip_close").removeClass(‘close_window‘);
$(".invest_tip").css(‘z-index‘,9996);
$(".invest_progress_tip").center().fadeIn();
break;
//流程提示
case ‘_tips‘:
if($(‘.invest_progress_tip‘).attr(‘rel‘)!=‘1‘){
show_p_tip({action:‘_init‘});
}
if(!$(‘#div_‘+object.name).length){
$(".invest_progress_tip .progress_tip_content").append(‘<div id="div_‘+object.name+‘"><span id="span_‘+object.name+‘">‘+object.msg+‘</span><i class="p-icon p-1"></i></div>‘);
}
$("#span_"+object.name).html(object.msg);
if(object.status==1) $("#div_"+object.name+" .p-icon").fadeIn();
if(object.status==0) $("#div_"+object.name+" .p-icon").addClass(‘p-2‘).fadeIn();
break;
//跳转支付
case ‘_jump‘:
var form = createForm(object.form);
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_noauth_tip mt5">点击支付按钮前往<span class="text-primary">一麻袋</span>进行支付操作</div>‘);
$(".invest_progress_tip .progress_tip_content .invest_noauth_tip").append(form);
break;
//完成
case ‘_complete‘:
var msg = object.msg?object.msg:‘完成支付‘;
$(".invest_progress_tip .progress_tip_content").append(‘<div class="invest_success_result mt15 text-center"><a href="javascript:void(0);" class="invest_result_btn btn btn-primary btn-block">‘+msg+‘</a></div>‘);
break;
//结束
case ‘_end‘:
var msg = object.msg?object.msg:‘小羊保证完成任务!‘;
$(".invest_progress_tip .progress_tip_title span").text(msg);
$(".invest_progress_tip .progress_tip_title .la-timer>div").addClass(‘success‘);
break;
}
}
这种方式,是以action来做参考依据的,分为5种情况,分别是_init(初始化),_tips(流程提示),_jump(跳转支付),_complete(完成支付),_end(结束),然后再使用递归,这样的话就划分了5个模块来处理这样的功能,_init(初始化),可以在第一步做递归调用,每一步都可以使用_tips(流程提示),即可随时改变状态,提示信息,有可以判断是否初始化,而决定是否递归调用_init(初始化),有可以处理其他特殊情况,比如第一步需要初始化操作,最后一步成功需要显示”完成支付“按钮,都是作为_jump(跳转支付),_complete(完成支付)来处理。代码不冗余了,可扩展性强了!条例清晰多了!
总结:在写js功能处理函数时,正确的思想是根据此功能将其划分成多个模块部分,通用模块,初始化模块,结束模块,特殊模块,用好递归等编程思想,这样的思路可以有效的写出好的代码!come on!!!bin!