95

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

说了你可能不信,我经常怀疑自己

不!适!合!写!代!码!

写代码的时候,我经常脑壳一晕,或者去群里摸一下鱼,然后就突然搞不清上一段代码写来干嘛的!!

刚才那段代码,真的是我写的?

直到,我发现了思维导图的妙用。

思维导图,本是用来记知识点的。

然而某一刻我头冒青烟,灵光一闪,一个念头铺面而来,挥之不去!

要不用它来记录代码逻辑试试?

为了验证自己的想法,我马不停蹄的找出自己之前实现过的分页逻辑。

看在按钮比较多的情分上,勉强算它有点复杂度。用来快速验证想法再合适不过。

分页的实现大概是用一些变量来控制当前状态,比如当前页,总页数,还有第几页的按钮等等,然后再写一个比如showPage()的方法来显示当前页的内容,通过变量的改变来控制showPage()的执行结果。

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

先用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);
  }
}

当函数都写好,变量都整明白了,就可以添加事件了。

先来一波思维逻辑头脑风暴

触发事件时,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属性来标识当前页

我原本很菜的!

后来用了思维导图!

可以徒手写分页了!

良心推荐,爱用不用!


这波能反杀
12.6k 声望2.7k 粉丝