88

脑图辅助我们写代码,代码完成得更加轻松

我自己常常在写代码的时候,会突然搞不清变量用来干嘛的,也会被理不清的逻辑搞得自己异常烦躁,我甚至常常暗示自己我不适合写代码,思维总是那么不清晰。直到我发现了思维导图的妙用。

最开始使用思维导图的时候,我其实是用来记知识点的。然而某一刻就灵光一闪了,尝试使用了思维导图来记录代码变量和逻辑,最后居然就轻松的把以为要理很久的问题搞定了。为了验证自己的想法,我又尝试自己写了一些小东西,对于我们这些初学者,肯定是选项卡和分页什么的最常用了,因为里面有一些变量总是那么令人难以捉摸,这里我以分页为例,向大家分享我是如何用脑图完成分页的。

这里省去使用ajax获取后台数据的部分,我自己创建一个js文件,里面用JSON存了一点数据。一般来说使用ajax都是一页一页的获取数据,我这里直接将所有数据都显示出来。

首先,根据多方了解,翻阅资料,找到了一种实现分页的方式,大概就是用一些变量来控制,比如当前页,总页数,还有第几页的按钮等等,然后再写一个比如showPage()来显示当前页的内容,通过变量的改变来控制showPage()的显示。

  • 首先用css画一个大概样式图

主要关注下方的按钮就行了

  • 然后自行脑补一下想要实现的功能

功能概括

  • 理清变量和功能方法

先理清可能用到的变量和方法,多了以后去掉,不够再补

  • 然后我们以showBtn()为例,思考如何完成这个函数。
我们默认每一个button页有5个按钮,为了防止最后一页不够5个,因此先隐藏所有的按钮,然后通过循环将存在的按钮显示出来

关于showButton函数的思考

于是我就可以完成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);
    }
}
  • 在来一轮逻辑整理,当函数都写好,变量都整明白了,就可以添加事件了,先来一轮思维整理。

触发事件时,page,btn,焦点变化的情况
于是按照这个思路,轻松完成事件添加,代码如下

$('.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属性来标识当前页

总的来说,与我而言,通过思维导图,是写出思维严密,易于维护的代码的有效途径,看上去浪费了时间,其实增加了非常多的效率。

clipboard.png


如果觉得我的文章对你有用,请随意赞赏
43 条评论
GeneralzzZ · 2017年12月15日

原来我也会用思维导图来做笔记,的确会清晰些。然而手机升级,心血都没了。有时间还是要整理一下

+9 回复

3

@GeneralzzZ 可以放在有道云笔里

九死蚕传人bo 作者 · 2017年12月15日
御风天流 · 2017年12月15日

这是什么软件画图?

+9 回复

8

@御风天流 MindNode

thinkcly · 2017年12月15日
Super盒子 · 2017年12月18日

这是高贵的php写法(滑稽

+7 回复

虎虎 · 2017年12月18日

个人偏见:个人在工作中,思维导图是用在产品需求的罗列与层级关系的。这样的用在写代码中,有点费时间,学习的时候当然可以。本人觉得,你这样写代码,不如在代码中将注释写清楚,也许更能提高效率。个人偏见。。。

+5 回复

0

+1,我一般直接用notepad++ 写了,控制好换行和缩进也挺直观的,最后也可以copy到注释里面

ByeMonkeyKing · 2017年12月24日
CC712 · 2017年12月18日

UML DFD 比这个来得直观吧?

+4 回复

0

看个人喜好吧,我更喜欢思维导图

九死蚕传人bo 作者 · 2017年12月18日
无敌小笼包 · 2017年12月18日

工具叫什么

+4 回复

2

@无敌小笼包 MindNode

无敌小笼包 · 2017年12月18日
2

MindNode 2.5.1 破解版: https://waitsun.ctfile.com/fs...

无敌小笼包 · 2017年12月18日
小小的PHP能干啥 · 2017年12月16日

我就问下,变量前面写个$
什么意思?

+2 回复

4

表示jquery声明的变量

九死蚕传人bo 作者 · 2017年12月16日
4

@九死蚕传人bo 是么?然后有什么用?

小小的PHP能干啥 · 2017年12月17日
1

@小小的PHP能干啥 表示和普通对象的区别,没特殊的含义

九死蚕传人bo 作者 · 2017年12月17日
fish · 2017年12月18日

把html、css部分的代码也分享出来下哇~

+2 回复

antipro · 2017年12月19日

对我来说,纸和笔更好用。

+2 回复

jqlts1 · 2017年12月18日

思维导图整理我也试过一段时间,但是有个蛋疼的地方就是不好搜索,特别是知识特别多的时候,很蛋疼

+1 回复

2

临时用就行了。如果要做知识整理搜索还是建议整理成文字形式

九死蚕传人bo 作者 · 2017年12月18日
1

@九死蚕传人bo 若用 SVG 生成的思维导图,搜索实现应该不难

南漂一卒 · 2017年12月19日
1

推荐(幕布)试试,层级文本,可以看脑图

魔法师学徒 · 2017年12月20日
冉五五 · 2017年12月19日

额,一直都是用纸和笔来画程序逻辑。。但感觉你这个更直观,不错!还有那些说效率低的,我承认这个刚开始是有点低,但这样做对于新手来说很友好啊,写出来的程序健壮,逻辑更清晰,bug更少!总之,这是一个好的编程习惯,熟悉后可以逐步抛弃。

+1 回复

莫生气 · 2017年12月21日

用uml画图,对于逻辑是否更直观?不光是类图,包括时序图,用例图...是否更能体现整个项目的系统性。前两年在学校上过建模课程,非常难。不需要编码,整个系统的架构,细节都用,用例,时序,类图等画出来,所有东西做好了,代码会自动生成,重在分析过程。

+1 回复

null · 2017年12月24日

哎呦不错哦

+1 回复

fish · 2017年12月18日

哈喽啊,能不能把整个项目的dome发粗来呀~好着急使用

回复

1

soory,这是很早之前写的文章,js部分的代码都在文章里了,html/css可以看图里大概自己写出来吧

九死蚕传人bo 作者 · 2017年12月18日
0

大神,能分享下你写代码的思路吗,感觉现在自己只能考虑到表面的一层,例如,1、上一页
2、点击1,2,3…去到指定的页数
3、显示按钮的下一页
4、last显示按钮的最后一页
5、next下一页
里面的怎么去实现还考虑不到

fish · 2017年12月18日
0

还有些不明白~

fish · 2017年12月18日
cllgeek · 2017年12月19日

还是把注释写清楚好,画这个写代码耗时间啊

回复

0

注释的话一下子不可能考虑到后面很多情况

PainAndLove · 2017年12月19日
0

主要是用来打草稿的时候用,不想把注释写的太复杂

九死蚕传人bo 作者 · 2017年12月19日
莫名小晟 · 2017年12月19日

有时候复杂点的东西我都是拿纸和笔凑合的,感觉脑图这种软件总是玩不来

回复

1

也是经常当草稿用

九死蚕传人bo 作者 · 2017年12月19日
edision · 2017年12月20日

额,逻辑都是花流程图来着

回复

皇埔铁蛋 · 2017年12月21日

思维导图还是适合用来梳理业务流程和逻辑,当你可以用思维导图很清楚流畅的画出来整套业务的流程后,写代码的适合更可以得心应手了。这样我感觉更加能提高效率

回复

沐言 · 2017年12月30日

我感觉还是传统的纸笔写起来有手感。

回复

hl4 · 2017年12月31日

这个也没有什么逻辑可以言。
话说思维导图也不适合写程序,它的层次和代码的层次不匹配。
思维导图可以帮你理清思路,但思路和代码还差一个设计。

回复

载入中...