我自己常常在写代码的时候，会突然搞不清变量用来干嘛的，也会被理不清的逻辑搞得自己异常烦躁，我甚至常常暗示自己我不适合写代码，思维总是那么不清晰。直到我发现了思维导图的妙用。
最开始使用思维导图的时候，我其实是用来记知识点的。然而某一刻就灵光一闪了，尝试使用了思维导图来记录代码变量和逻辑，最后居然就轻松的把以为要理很久的问题搞定了。为了验证自己的想法，我又尝试自己写了一些小东西，对于我们这些初学者，肯定是选项卡和分页什么的最常用了，因为里面有一些变量总是那么令人难以捉摸，这里我以分页为例，向大家分享我是如何用脑图完成分页的。
这里省去使用ajax获取后台数据的部分，我自己创建一个js文件，里面用JSON存了一点数据。一般来说使用ajax都是一页一页的获取数据，我这里直接将所有数据都显示出来。
首先，根据多方了解，翻阅资料，找到了一种实现分页的方式，大概就是用一些变量来控制，比如当前页，总页数，还有第几页的按钮等等，然后再写一个比如showPage()来显示当前页的内容，通过变量的改变来控制showPage()的显示。
首先用css画一个大概样式图
然后自行脑补一下想要实现的功能
理清变量和功能方法
然后我们以showBtn()为例，思考如何完成这个函数。
我们默认每一个button页有5个按钮，为了防止最后一页不够5个，因此先隐藏所有的按钮，然后通过循环将存在的按钮显示出来
于是我就可以完成showButton函数如下
function showButton(){
var
$numb=$('.numb'),
min=(btn_cur-1)*5+1,
max=0;
if(btn_cur==btn_acount){
max=page_acount+1;
}elseif(btn_cur<btn_acount){
max=(btn_cur*5)+1;
};
$numb.hide();
for(vari=min;i<max;i++){
!function(){
$numb.eq(i%5-1).show();
$numb.eq(i%5-1).attr('data-list',i);
$numb.eq(i%5-1).html(i);
}();
}
}当我没有使用脑图写出来的代码是这样的 – -！，完全没逻辑可言有木有
function showButton(){
var$numb=$('.numb');
if(btn_acount==1){
$numb.hide();
$('.more').hide();
$('.last').hide();
for(vari=0;i<acountPage;i++){
$numb.eq(i).show();
$numb.eq(i).attr('data-list',i);
}
};
varmin=(btn_cur-1)*5+1;
varmax=0;
if(btn_cur==btn_acount){
max=page_acount+1;
}elseif(btn_cur<btn_acount){
max=btn_cur*5+1;
};
$numb.hide();
for(vari=min;i<max;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(' ')[0];
$target.on('selectstart',function(){
returnfalse;
});
switch(className){
case'prev_page':
if(index!=0){
index-=1;
page_cur-=1;
}elseif(index==0){
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<page_acount%5-1){
index++;
page_cur++;
}
}elseif(btn_cur<btn_acount){
if(index==4){
index=0;
btn_cur+=1;
page_cur+=1;
}elseif(index<4){
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_acount){
btn_cur+=1;
index=0;
showButton();
setFocus();
page_cur=$('.numb').eq(0).html();
showPage(page_cur,page_every);
};
break;
case'last':
if(btn_cur!=btn_acount){
btn_cur=btn_acount;
index=0;
page_cur=(btn_cur-1)*5+1;
showPage(page_cur,page_every);
showButton();
setFocus();
};
default:
break;
}
});主要是通过类名来区分目标DOM，通过自定义data-list属性来标识当前页
总的来说，与我而言，通过思维导图，是写出思维严密，易于维护的代码的有效途径，看上去浪费了时间，其实增加了非常多的效率。
