使用思惟導圖，優雅的完成本身的代碼

我本身經常在寫代碼的時候，會忽然搞不清變量用來幹嗎的，也會被理不清的邏輯搞得本身異常煩躁，我甚至經常暗示本身我不適合寫代碼，思惟老是那麼不清晰。直到我發現了思惟導圖的妙用。

最開始使用思惟導圖的時候，我實際上是用來記知識點的。然而某一刻就靈光一閃了，嘗試使用了思惟導圖來記錄代碼變量和邏輯，最後竟然就輕鬆的把覺得要理好久的問題搞定了。爲了驗證本身的想法，我又嘗試本身寫了一些小東西，對於咱們這些初學者，確定是選項卡和分頁什麼的最經常使用了，由於裏面有一些變量老是那麼使人難以捉摸，這裏我以分頁爲例，向你們分享我是如何用腦圖完成分頁的。

這裏省去使用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屬性來標識當前頁

總的來講，與我而言，經過思惟導圖，是寫出思惟嚴密，易於維護的代碼的有效途徑，看上去浪費了時間，其實增長了很是多的效率。