RequireJS入门指南(二)-vue分页模块抽离
vue实现分页,模块化实现的碎碎念。这篇讲一下我是如何在项目中抽离出分页模块的。这段时间做的项目让我很头疼,因为前面写代码的时候没有考虑很多东西,写到后面就发现代码越来越重。而且在不同页面都有相同的代码,比如分页。前有大神说:长痛不如短痛。我最近超级苦恼,已经停止好几天没有写代码了,就是因为不断的写,代码越写越丑。比如我跟某人的抱怨:但是这样下去也不是办法,最近又被老板逼着写
·
vue实现分页,模块化实现的碎碎念。
这篇讲一下我是如何在项目中抽离出分页模块的。
这段时间做的项目让我很头疼,因为前面写代码的时候没有考虑很多东西,写到后面就发现代码越来越重。
而且在不同页面都有相同的代码,比如分页。
前有大神说:长痛不如短痛。
我最近超级苦恼,已经停止好几天没有写代码了,就是因为不断的写,代码越写越丑。
比如我跟某人的抱怨:
但是这样下去也不是办法,最近又被老板逼着写文档,又抽不出一整段时间来改代码。
于是想到说最近开始学习requireJS,开始把代码模块化出来。
今天已经小有进展,虽然很多原理还是不是很明白就开始拿来用,但是至少实现了一个分页模块的抽离。鼓掌鼓掌~~~~
还好之间写代码的时候一直有写注释的习惯,虽然写得很丑。
这里,来贴一下源码吧,分页模块pagin.js
define(function() {
/*----处理分页
*----输入:
*--------t_p(NUM):总页数
*--------cur_p(NUM):当前页码
*返回:页码数组pages,以及当前页码的类
*/
var paginGetli = function(t_p, cur_p) {
console.log('test');
//总页数,默认为1
var total_page = t_p || 1;
//当前页数,默认为1
var cur_page = cur_p || 1;
/*处理分页*/
var pages = [];
var prev = {
"disabled": false,
"active": false,
"content": "<<"
};
var next = {
"disabled": true,
"active": false,
"content": ">>"
}
if (total_page === 1) {
console.log('total_page === 1');
pages.push(prev);
pages.push({
"disabled": true,
"active": true,
"content": "1"
});
pages.push(next);
} else {
if (total_page === cur_page) {
/*当前页数==尾页*/
prev.disabled = false;
} else if (cur_page === 1) {
/*当前页数为第一页*/
next.disabled = false;
prev.disabled = true;
} else {
/*当前页非首页、末页*/
prev.disabled = false;
next.disabled = false;
}
pages.push(prev);
for (var i = 1; i <= total_page; i++) {
var item = {
"disabled": false,
"active": false,
"content": i
};
if (i === cur_page) {
item.active = true;
};
pages.push(item);
}
pages.push(next);
}
var result = {
"cur_page": cur_page,
"pages": pages
}
return result;
};
return {
paginGetli: paginGetli
};
});
主模块zhuguan.js
require.config({
baseUrl: 'js/common'
});
require(['common', 'pagin'], function(defaultStr, pagin) {
var baseUrl = defaultStr();
console.log(pagin.paginGetli(4, 2));
.................
})
更多推荐
已为社区贡献9条内容
所有评论(0)