您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

獨立開發 Web 專案總結：打造高效分頁組件的完整實踐

編輯：Java 相關知識

回顧這個 Web 專案的開發歷程，從框架設計、頁面佈局、後台架構、交互邏輯，到前後端代碼實現、數據庫建模、數據導入，乃至壓力測試、容錯驗證、交互測試與後續修補，所有環節均由我獨立完成。期間還需分身處理業務拓展，能交付如此完整度的產品，實屬不易。

專案大量採用 AJAX 技術提升用戶體驗，但考慮到商業產品的屬性，刻意避免了過度花哨的交互，力求穩健實用。這讓我聯想到過往在團隊協作中，龐大人力投入三個月卻交付豆腐渣工程的慘痛教訓，深感獨立把控全鏈路的價值。

核心亮點：強化版分頁控件實現

在眾多自研組件中，最滿意的莫過於這個經過深度優化的分頁控件。它不僅支援基礎翻頁，更引入分組顯示邏輯、動態頁碼計算、邊界容錯處理等特性，極大提升了大數據量下的導航體驗。

核心代碼解析

// 分頁控制入口
// 參數：RS對象、每頁條數、頁碼鏈接模板、當前頁碼
function Pages(rsObj, pagesize, url, num) {
    var pageContent;
    rsObj.PageSize = pagesize;
    
    // 當前頁碼校驗與默認處理
    if (!$r(num) || $r(num) == "" || $r(num).Count == 0 || $r(num) < 1) {
        num = 1;
        rsObj.AbsolutePage = 1;
    } else {
        num = Number($r(num) + "");
        rsObj.AbsolutePage = num;
    }
    
    // 手動計算總頁數，避免 RS.PageCount 在動態調整頁面大小時出錯
    var pageCount = Math.ceil(rsObj.RecordCount / pagesize);
    pageContent = pageNum(rsObj, pageCount, url, num);
    return "共 " + pageCount + "頁 / " + rsObj.RecordCount + " 條記錄 " + pageContent;
}

// 頁碼組渲染邏輯
function pageNum(rsObj, pgCont, url, num) {
    var CS, CSL, CSR, z, cont, thisContent = "", maxPageNum = 10;
    
    // 計算分組總數
    CS = Math.ceil(pgCont / maxPageNum);
    // 當前所在組
    CSR = Math.ceil(num / maxPageNum);
    // 當前組起始頁碼
    CSL = (CSR - 1) * maxPageNum;
    
    // 最後一組頁碼數量修正
    if (CS == CSR) {
        cont = (pgCont % maxPageNum == 0) ? CSL + maxPageNum : CSL + (pgCont % maxPageNum);
    } else {
        cont = CSR * maxPageNum;
    }
    
    // 最後一頁且記錄數非整倍數時，動態調整 PageSize
    if (num == pgCont && rsObj.RecordCount % rsObj.PageSize != 0) {
        rsObj.PageSize = rsObj.RecordCount % rsObj.PageSize;
    }
    CSL += 1;
    
    // 首頁/上一頁
    if (num > 1) {
        thisContent += pgUrl(url, 1, "首頁") + pgUrl(url, (num - 1), "上一頁");
    } else {
        thisContent += "首頁上一頁";
    }
    
    // 上一組跳轉
    if (CSR > 1) {
        thisContent += pgUrl(url, (CSL - maxPageNum), "[...]");
    }
    
    // 當前組頁碼循環輸出
    for (z = CSL; z <= cont; z++) {
        thisContent += checkTO(z, num, url);
    }
    
    // 下一組跳轉
    if (CSR < CS) {
        thisContent += pgUrl(url, (cont + 1), "[...]");
    }
    
    // 下一頁/尾頁
    if (num != pgCont) {
        thisContent += pgUrl(url, (num + 1), "下一頁") + pgUrl(url, pgCont, "尾頁");
    } else {
        thisContent += "下一頁尾頁";
    }
    return thisContent;
}

// 當前頁高亮判斷
function checkTO(pageSort, num, url) {
    if (pageSort == num) {
        return "[" + pageSort + "]";
    } else {
        return pgUrl(url, pageSort, "[" + pageSort + "]");
    }
}

// 鏈接生成器
function pgUrl(url, num, txt) {
    return '' + txt + '';
}