使用思維導圖，優雅的完成自己的代碼
作者：九死蠶傳人bo
https://segmentfault.com/a/1190000012435669
我自己常常在寫代碼的時候，會突然搞不清變數用來幹嘛的，也會被理不清的邏輯搞得自己異常煩躁，我甚至常常暗示自己我不適合寫代碼，思維總是那麼不清晰。直到我發現了思維導圖的妙用。
最開始使用思維導圖的時候，我其實是用來記知識點的。然而某一刻就靈光一閃了，嘗試使用了思維導圖來記錄代碼變數和邏輯，最後居然就輕鬆的把以為要理很久的問題搞定了。為了驗證自己的想法，我又嘗試自己寫了一些小東西，對於我們這些初學者，肯定是選項卡和分頁什麼的最常用了，因為裡面有一些變數總是那麼令人難以捉摸，這裡我以分頁為例，向大家分享我是如何用腦圖完成分頁的。
這裡省去使用ajax獲取後台數據的部分，我自己創建一個js文件，裡面用JSON存了一點數據。一般來說使用ajax都是一頁一頁的獲取數據，我這裡直接將所有數據都顯示出來。
首先，根據多方了解，翻閱資料，找到了一種實現分頁的方式，大概就是用一些變數來控制，比如當前頁，總頁數，還有第幾頁的按鈕等等，然後再寫一個比如showPage()來顯示當前頁的內容，通過變數的改變來控制showPage()的顯示。
首先用css畫一個大概樣式圖
然後自行腦補一下想要實現的功能
理清變數和功能方法
然後我們以showBtn()為例，思考如何完成這個函數。
我們默認每一個button頁有5個按鈕，為了防止最後一頁不夠5個，因此先隱藏所有的按鈕，然後通過循環將存在的按鈕顯示出來
於是我就可以完成showButton函數如下
functionshowButton(){
var
$numb=$(".numb"),
min=(btn_cur-1)*5+1,
max=;
if(btn_cur==btn_acount){
max=page_acount+1;
}elseif(btn_cur
max=(btn_cur*5)+1;
};
$numb.hide();
for(vari=min;i
!function(){
$numb.eq(i%5-1).show();
$numb.eq(i%5-1).attr("data-list",i);
$numb.eq(i%5-1).html(i);
}();
}
}
當我沒有使用腦圖寫出來的代碼是這樣的 – -！，完全沒邏輯可言有木有
functionshowButton(){
var$numb=$(".numb");
if(btn_acount==1){
$numb.hide();
$(".more").hide();
$(".last").hide();
for(vari=;i
$numb.eq(i).show();
$numb.eq(i).attr("data-list",i);
}
};
varmin=(btn_cur-1)*5+1;
varmax=;
if(btn_cur==btn_acount){
max=page_acount+1;
}elseif(btn_cur
max=btn_cur*5+1;
};
$numb.hide();
for(vari=min;i
$numb.eq(i%5-1).show();
$numb.eq(i%5-1).attr("data-list",i);
$numb.eq(i%5-1).html(i);
}
}
在來一輪邏輯整理，當函數都寫好，變數都整明白了，就可以添加事件了，先來一輪思維整理。
於是按照這個思路，輕鬆完成事件添加，代碼如下
$(".pos_page").on("click",function(e){
// e.preventDefault();
var$target=$(e.target);
varclassName=$target.attr("class").split(" ")[];
$target.on("selectstart",function(){
returnfalse;
});
switch(className){
case"prev_page":
if(index!=){
index-=1;
page_cur-=1;
}elseif(index==){
if(btn_cur>1){
index=4;
btn_cur-=1;
page_cur-=1;
}elseif(btn_cur==1){
return;
}
};
showPage(page_cur,page_every);
showButton();
setFocus();
break;
case"next_page":
if(btn_cur==btn_acount){
if(index==page_acount%5-1){
return;
}elseif(index
index++;
page_cur++;
}
}elseif(btn_cur
if(index==4){
index=;
btn_cur+=1;
page_cur+=1;
}elseif(index
index++;
page_cur++;
};
};
showPage(page_cur,page_every);
showButton();
setFocus();
break;
case"numb":
page_cur=$target.attr("data-list");
index=page_cur%5-1;
console.log(page_cur);
showPage(page_cur,page_every);
showButton();
setFocus();
break;
case"more":
if(btn_cur
btn_cur+=1;
index=;
showButton();
setFocus();
page_cur=$(".numb").eq().html();
showPage(page_cur,page_every);
};
break;
case"last":
if(btn_cur!=btn_acount){
btn_cur=btn_acount;
index=;
page_cur=(btn_cur-1)*5+1;
showPage(page_cur,page_every);
showButton();
setFocus();
};
default:
break;
}
});
主要是通過類名來區分目標DOM，通過自定義data-list屬性來標識當前頁
總的來說，與我而言，通過思維導圖，是寫出思維嚴密，易於維護的代碼的有效途徑，看上去浪費了時間，其實增加了非常多的效率。
覺得本文對你有幫助？請分享給更多人。
關注「程序員寶庫」公眾號，直接獲取各種編程資料！
TAG:程序員寶庫 |