说了你可能不信,我经常怀疑自己
不!适!合!写!代!码!
写代码的时候,我经常脑壳一晕,或者去群里摸一下鱼,然后就突然搞不清上一段代码写来干嘛的!!
刚才那段代码,真的是我写的?
直到,我发现了思维导图的妙用。
思维导图,本是用来记知识点的。
然而某一刻我头冒青烟,灵光一闪,一个念头铺面而来,挥之不去!
要不用它来记录代码逻辑试试?
为了验证自己的想法,我马不停蹄的找出自己之前实现过的分页逻辑。
看在按钮比较多的情分上,勉强算它有点复杂度。用来快速验证想法再合适不过。
分页的实现大概是用一些变量来控制当前状态,比如当前页,总页数,还有第几页的按钮等等,然后再写一个比如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属性来标识当前页
我原本很菜的!
后来用了思维导图!
可以徒手写分页了!
良心推荐,爱用不用!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。