怎么样才是设计功能函数的好思路（javascript）？

在js里面，对于函数的调用，实际上也是也是面向对象的思路，于是写好js函数，也是考核面向对象设计的能力，同时也必须考虑到如何实现高内聚和低耦合，拿一个例子来说，现在的需求是这样的，实现个投资进度框，就是如图所示：总共分四步来走，第一步“创建订单中”，成功改变提示信息“创建订单成功！”，显示，不成功改变提示信息“创建订单失败！”,显示，依次下去第二步，第三步，第四步！

<!--投资操作进度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;}}