别人变强靠天赋，而我，靠思维导图
说了你可能不信，我经常怀疑自己
不！适！合！写！代！码！
写代码的时候，我经常脑壳一晕，或去群里摸一下鱼，然后就突然搞不清上一段代码是写来干嘛的！！
而且会有一点恍惚，刚才那段代码，真的是我写的？
直到，我发现了思维导图的妙用。
思维导图，本是用来记知识点的。
不过某一刻我头冒青烟，灵光一闪，一个念头扑面而来，挥之不去！
要不用它来记录代码逻辑试试？
为了验证自己的想法，我马不停蹄的找出自己之前实现过的分页逻辑。
看在按钮比较多的情分上，勉强算它有点复杂度。用来快速验证想法再合适不过。
分页的实现大概是用一些变量来控制当前状态，比如当前页，总页数，还有第几页的按钮等等，然后再写一个比如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属性来标识当前页
我原本很菜的！
后来用了思维导图！
可以徒手写分页了！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读