Tối ưu hóa if-else lồng nhau

Mọi người cho em hỏi em có viết đoạn code xử lý responsive phần phân trang bằng react, Em viết xong nhìn lại còn muốn choáng, có cách nào giảm số lượng if-esle lồng nhau không ạ?
Em cảm ơn ạ!

var currentPage = currentPage || this.props.data.page;
var lastPage = this.props.data.totalPage;
var startPage, endPage;
let pageItemSubtract = 0;
if (lastPage) {
    if (this.props.isDesktopTypeA) {
        pageItemSubtract = 5;
    } else if (this.props.isDesktopTypeB) {
        pageItemSubtract = 2;
    } else pageItemSubtract = 0;
}
​
if (lastPage <= 10) {
    if (pageItemSubtract == 2 && lastPage >=7) {
        startPage = 1;
        endPage = lastPage - pageItemSubtract;
        if (currentPage > endPage) {
            startPage = currentPage - endPage + pageItemSubtract - 1;
            endPage = currentPage;
        }
    } 
    else if (pageItemSubtract == 5 && lastPage >=7) {
        startPage = 1;
        endPage = lastPage - 3;
        if (currentPage > endPage) {
            startPage = currentPage - endPage + 2;
            endPage = currentPage;
        }
    } 
    else {
        startPage = 1;
        endPage = lastPage;
     }
} else {
    if (pageItemSubtract == 2) {
        
        if (currentPage <= 5) {
            startPage = 1;
            endPage = 10 - pageItemSubtract;
        } 
        else if (currentPage + 3 >= lastPage) {
            startPage = lastPage - 7    ;
            endPage = lastPage;
        } 
        else {
            startPage = currentPage - 4;
            endPage = parseInt(currentPage) + 3;
        }
    } 
    else if (pageItemSubtract == 5) {
        
        if (currentPage <= 3) {
            startPage = 1;
            endPage = 10 - pageItemSubtract;
        } 
        else if (currentPage + 2 >= lastPage) {
            startPage = lastPage - 4    ;
            endPage = lastPage;
        }  
        else {
            startPage = currentPage - 2;
            endPage = parseInt(currentPage) + 2;
        }
    } 
    else {
        if (currentPage <= 6) {
            startPage = 1;
            endPage = 10;
        } else if (currentPage + 4 >= lastPage) {
            startPage = lastPage - 9;
            endPage = lastPage;
        } else {
            startPage = currentPage - 5;
            endPage = parseInt(currentPage) + 4;
        }
    }
}

Những gì gần giống hoặc gần giống nhau thì gom thành 1 hàm (phương thức) và truyền tham số (tham chiếu).

4 Likes

Với bài toán của bạn thì thường có 2 hướng xử lý (nói đao to búa lớn một chút) là state pattern và strategy pattern.

7 Likes

ReactJS à bạn ?..

cảm ơn mọi người, em đang làm theo hướng strategy parttern của anh @Stanley00 ạ!

Đúng rùi bạn, mình dùng react

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?