资讯专栏INFORMATION COLUMN

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

antz / 2955人阅读

摘要:于是按照这个思路,轻松完成事件添加,代码如下主要是通过类名来区分目标,通过自定义属性来标识当前页总的来说,与我而言,通过思维导图,是写出思维严密,易于维护的代码的有效途径,看上去浪费了时间,其实增加了非常多的效率。

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

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

这里省去使用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

当我没有使用脑图写出来的代码是这样的 - -!,完全没逻辑可言有木有

function showButton() {
    var $numb = $(".numb");
    if (btn_acount == 1) {
        $numb.hide();
        $(".more").hide();
        $(".last").hide();
        for(var i=0; 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属性来标识当前页

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92158.html

相关文章

  • 学会它,能让你工作学习效率提升10倍!

    摘要:思维导图的好处它们能投让你一直对全部知识图景了然于胸,因而可以让你对那一学科的全部知识有一个更加平衡和更加全面的理解。竭尽所能地利用一切让思维导图的制作过程充满乐趣音乐绘画色彩。 从小老师就教育小肆,要多记笔记,说好记性不如烂笔头,但记过的笔记却很快就忘了,甚至回头再看都不知道当时记得什么,一直期望能有个比记笔记更好的方法来学习,直到我遇见了它--思维导图。 什么是思维导图? 人脑不是...

    Cruise_Chan 评论0 收藏0
  • 想让你博文获得更多推荐吗?快来了解下思维导图

    摘要:下面就是我的另一篇文章你真的了解和吗中的思维导图。但是托尼布赞并没有沉沦,而是寻找解决方法,最终发明了思维导图。本节的思维导图就是典型的折中型思维导图。安排合适的间隔合适的间隔能够很大程度提高思维导图的审美性。 天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。——《为学》 引言 我猜发布文章的同学肯定都有一个目标,那就是获得更多的推荐。推荐越多,表示得到别人的认同越多,自我满...

    cc17 评论0 收藏0
  • 想让你博文获得更多推荐吗?快来了解下思维导图

    摘要:下面就是我的另一篇文章你真的了解和吗中的思维导图。但是托尼布赞并没有沉沦,而是寻找解决方法,最终发明了思维导图。本节的思维导图就是典型的折中型思维导图。安排合适的间隔合适的间隔能够很大程度提高思维导图的审美性。 天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。——《为学》 引言 我猜发布文章的同学肯定都有一个目标,那就是获得更多的推荐。推荐越多,表示得到别人的认同越多,自我满...

    zorpan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<