摘要：于是按照這個(gè)思路，輕松完成事件添加，代碼如下主要是通過(guò)類名來(lái)區(qū)分目標(biāo)，通過(guò)自定義屬性來(lái)標(biāo)識(shí)當(dāng)前頁(yè)總的來(lái)說(shuō)，與我而言，通過(guò)思維導(dǎo)圖，是寫出思維嚴(yán)密，易于維護(hù)的代碼的有效途徑，看上去浪費(fèi)了時(shí)間，其實(shí)增加了非常多的效率。

我自己常常在寫代碼的時(shí)候，會(huì)突然搞不清變量用來(lái)干嘛的，也會(huì)被理不清的邏輯搞得自己異常煩躁，我甚至常常暗示自己我不適合寫代碼，思維總是那么不清晰。直到我發(fā)現(xiàn)了思維導(dǎo)圖的妙用。

最開(kāi)始使用思維導(dǎo)圖的時(shí)候，我其實(shí)是用來(lái)記知識(shí)點(diǎn)的。然而某一刻就靈光一閃了，嘗試使用了思維導(dǎo)圖來(lái)記錄代碼變量和邏輯，最后居然就輕松的把以為要理很久的問(wèn)題搞定了。為了驗(yàn)證自己的想法，我又嘗試自己寫了一些小東西，對(duì)于我們這些初學(xué)者，肯定是選項(xiàng)卡和分頁(yè)什么的最常用了，因?yàn)槔锩嬗幸恍┳兞靠偸悄敲戳钊穗y以捉摸，這里我以分頁(yè)為例，向大家分享我是如何用腦圖完成分頁(yè)的。

這里省去使用ajax獲取后臺(tái)數(shù)據(jù)的部分，我自己創(chuàng)建一個(gè)js文件，里面用JSON存了一點(diǎn)數(shù)據(jù)。一般來(lái)說(shuō)使用ajax都是一頁(yè)一頁(yè)的獲取數(shù)據(jù)，我這里直接將所有數(shù)據(jù)都顯示出來(lái)。

首先，根據(jù)多方了解，翻閱資料，找到了一種實(shí)現(xiàn)分頁(yè)的方式，大概就是用一些變量來(lái)控制，比如當(dāng)前頁(yè)，總頁(yè)數(shù)，還有第幾頁(yè)的按鈕等等，然后再寫一個(gè)比如showPage()來(lái)顯示當(dāng)前頁(yè)的內(nèi)容，通過(guò)變量的改變來(lái)控制showPage()的顯示。

首先用css畫一個(gè)大概樣式圖

然后自行腦補(bǔ)一下想要實(shí)現(xiàn)的功能

理清變量和功能方法

然后我們以showBtn()為例，思考如何完成這個(gè)函數(shù)。

我們默認(rèn)每一個(gè)button頁(yè)有5個(gè)按鈕，為了防止最后一頁(yè)不夠5個(gè)，因此先隱藏所有的按鈕，然后通過(guò)循環(huán)將存在的按鈕顯示出來(lái)

于是我就可以完成showButton函數(shù)如下

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
當(dāng)我沒(méi)有使用腦圖寫出來(lái)的代碼是這樣的  - -！，完全沒(méi)邏輯可言有木有
function showButton() {
    var $numb = $(".numb");
    if (btn_acount == 1) {
        $numb.hide();
        $(".more").hide();
        $(".last").hide();
        for(var i=0; i
在來(lái)一輪邏輯整理，當(dāng)函數(shù)都寫好，變量都整明白了，就可以添加事件了，先來(lái)一輪思維整理。

于是按照這個(gè)思路，輕松完成事件添加，代碼如下
$(".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;
    }
});
主要是通過(guò)類名來(lái)區(qū)分目標(biāo)DOM，通過(guò)自定義data-list屬性來(lái)標(biāo)識(shí)當(dāng)前頁(yè)
總的來(lái)說(shuō)，與我而言，通過(guò)思維導(dǎo)圖，是寫出思維嚴(yán)密，易于維護(hù)的代碼的有效途徑，看上去浪費(fèi)了時(shí)間，其實(shí)增加了非常多的效率。