使用思维导图，优雅的完成自己的代码 / 开普饭

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

不！适！合！写！代！码！

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

刚才那段代码，真的是我写的？

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

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

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

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

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

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

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

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

先用css画一个大概样式图

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

理清变量和功能方法

以showBtn()为例，思考如何完成这个函数。

默认每一个button页有5个按钮，为了防止最后一页不够5个，先隐藏所有的按钮，然后通过循环将存在的按钮显示出来

思维导图一出，逻辑果然顺滑如丝！

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

我原本很菜的！

后来用了思维导图！

可以徒手写分页了！

良心推荐，爱用不用！

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

相关推荐