使用思维导图,优雅的完成自己的代码

转载 2018年01月08日 00:00:00

(点击上方公众号,可快速关注)

作者:九死蚕传人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属性来标识当前页

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


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

  • 本文已收录于以下专栏:

libmesh 思维导图(类接口设计)

libmesh 思维导图(类接口设计) 2015-02-21 01:31 277人阅读 评论(0) 收藏 举报 分类: 开源 libmesh(8) 版权声明:本文为博主原创文章...
  • zyex1108
  • zyex1108
  • 2016年08月30日 15:47
  • 483

如何用思维导图学Java编程思想

摘要:如何学习Java编程思想,基本分为21个部分,看完本文你就有答案。没想到会有很多人留言要这个思维导图,一一回复有点累,放在 Github 上,方便大家下载。文章中的截图,并没有详尽说明这个思维导...
  • bjweimengshu
  • bjweimengshu
  • 2017年12月23日 00:00
  • 711

编程入门思维导图

  • junli_chen
  • junli_chen
  • 2016年03月25日 17:21
  • 1189

App后台开发(学习笔记)

App后台开发和运维第二章 基础技术 1。使用思维导图 将类和模块细分 2。在API返回是数据中,尽量返回“”非null 减少应用的崩溃,使用一个全局函数,来实现,如果API返回的数据中缺少客户...
  • qq_22329521
  • qq_22329521
  • 2016年06月27日 21:25
  • 964

App后台学习笔记

App后台开发运维和架构设计 第三章App后台核心技术 App通信安全 1.使用https进行通信 2.将token缠在URL里面然后将rul进行签名,同时带上时间戳,当后台发现当前时间戳很久...
  • qq_22329521
  • qq_22329521
  • 2016年06月27日 22:51
  • 328

如何把代码写的优雅一些

一、背景      写这篇博客的背景是因为今晚因为一些代码风格的原因,被主管教育了一顿,代码的好坏,影响的是整个公司的开发效率,还会影响找bug的速度,同时,对我们自身的成长也会起到阻碍作用。所以是时...
  • LJFPHP
  • LJFPHP
  • 2018年01月10日 21:40
  • 127

如何写出优雅的java代码

一、不要使用魔法数字,尽量定义枚举、常量、宏:  我常常见到表示各种状态的数字,0,1,2....,我真的不知道这表示什么含义,如果  你在不在文档中说明的话,这个东东过几天连你自己都不知道个一二...
  • u011700281
  • u011700281
  • 2014年03月20日 15:35
  • 2594

App后台开发笔记

第九章-上 App后台架构 聊天架构 由于弱网性的缘故,信号不稳定响应时间长,出现丢包等问题,减少数据往返的次数,如果一长连接的形式,可能出现App和服务器突然中断,而且没法通过连接端口异常进行...
  • qq_22329521
  • qq_22329521
  • 2016年06月29日 23:32
  • 1106

20.如何从app业务逻辑提炼api接口

在app后端的工作中,设计api是一个很考验设计能力的工作。在项目的初始阶段,只知道具体的业务逻辑,那怎么把业务逻辑抽象和提炼,设计出api呢?通过阅读本文,可解答以上疑惑。...
  • newjueqi
  • newjueqi
  • 2015年03月23日 12:54
  • 17555

如何编写简单优雅的代码

如何编写简单优雅的代码
  • u013719984
  • u013719984
  • 2016年10月03日 00:15
  • 1526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用思维导图,优雅的完成自己的代码
举报原因:
原因补充:

(最多只允许输入30个字)