（點選上方 程式設計師寶庫，可快速關注）

作者：九死蠶傳人bo https://segmentfault.com/a/1190000012435669

我自己常常在寫程式碼的時候，會突然搞不清變數用來幹嘛的，也會被理不清的邏輯搞得自己異常煩躁，我甚至常常暗示自己我不適合寫程式碼，思維總是那麼不清晰。直到我發現了思維導圖的妙用。

最開始使用思維導圖的時候，我其實是用來記知識點的。然而某一刻就靈光一閃了，嘗試使用了思維導圖來記錄程式碼變數和邏輯，最後居然就輕鬆的把以為要理很久的問題搞定了。為了驗證自己的想法，我又嘗試自己寫了一些小東西，對於我們這些初學者，肯定是選項卡和分頁什麼的最常用了，因為裡面有一些變數總是那麼令人難以捉摸，這裡我以分頁為例，向大家分享我是如何用腦圖完成分頁的。

這裡省去使用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;
 } else if (btn_cur < btn_acount) {
 max = (btn_cur*5) + 1;
 };
 
 $numb.hide();
 
 for(var i=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(var i=0; i<acountPage; i++) {
 $numb.eq(i).show();
 $numb.eq(i).attr('data-list', i);
 }
 };
 
 var min = (btn_cur-1)*5 + 1;
 var max = 0;
 if (btn_cur == btn_acount) {
 max = page_acount+1;
 } else if (btn_cur < btn_acount) {
 max = btn_cur*5+1;
 };
 
 $numb.hide();
 
 for( var i=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);
 var className = $target.attr('class').split(' ')[0];
 
 $target.on('selectstart', function() {
 return false;
 });
 
 switch(className) {
 case 'prev_page':
 if (index!=0) {
 index -= 1;
 page_cur -= 1;
 } else if (index == 0) {
 if (btn_cur > 1 ) {
 index = 4;
 btn_cur -= 1;
 page_cur -= 1;
 } else if (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;
 } else if( index < page_acount%5 - 1) {
 index ++;
 page_cur ++;
 }
 } else if (btn_cur < btn_acount) {
 if (index == 4) {
 index = 0;
 btn_cur += 1;
 page_cur += 1;
 } else if (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屬性來標識當前頁

總的來說，與我而言，通過思維導圖，是寫出思維嚴密，易於維護的程式碼的有效途徑，看上去浪費了時間，其實增加了非常多的效率。

覺得本文對你有幫助？請分享給更多人。