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));
    .................
})
Logo

前往低代码交流专区

更多推荐