使用思惟导图，优雅的完成本身的代码

我本身经常在写代码的时候，会忽然搞不清变量用来干吗的，也会被理不清的逻辑搞得本身异常烦躁，我甚至经常暗示本身我不适合写代码，思惟老是那么不清晰。直到我发现了思惟导图的妙用。

最开始使用思惟导图的时候，我实际上是用来记知识点的。然而某一刻就灵光一闪了，尝试使用了思惟导图来记录代码变量和逻辑，最后竟然就轻松的把觉得要理好久的问题搞定了。为了验证本身的想法，我又尝试本身写了一些小东西，对于咱们这些初学者，确定是选项卡和分页什么的最经常使用了，由于里面有一些变量老是那么使人难以捉摸，这里我以分页为例，向你们分享我是如何用脑图完成分页的。

这里省去使用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属性来标识当前页

总的来讲，与我而言，经过思惟导图，是写出思惟严密，易于维护的代码的有效途径，看上去浪费了时间，其实增长了很是多的效率。