在js裡面，對於函數的調用，實際上也是也是面向對象的思路，於是寫好js函數，也是考核面向對象設計的能力，同時也必須考慮到如何實現高內聚和低耦合，拿一個例子來說，現在的需求是這樣的，實現個投資進度框，就是如圖所示：總共分四步來走，第一步“創建訂單中”，成功改變提示信息“創建訂單成功！”，顯示，不成功改 ...
在js裡面，對於函數的調用，實際上也是也是面向對象的思路，於是寫好js函數，也是考核面向對象設計的能力，同時也必須考慮到如何實現高內聚和低耦合，拿一個例子來說，現在的需求是這樣的，實現個投資進度框，就是如圖所示：
總共分四步來走，第一步“創建訂單中”，成功改變提示信息“創建訂單成功！”，顯示
，不成功改變提示信息“創建訂單失敗！”,顯示
，依次下去第二步，第三步，第四步！
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<!--投資操作進度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為不成功，於是怎麼一個函數就出來：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/*
調用說明
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來保證第一步可以實現某個操作
雖然功能可以實現，但是代碼相當冗餘，可擴展性不好，相當不智能！
於是另外一種方法出來了，
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/*
調用說明
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！
