大家都應(yīng)該上過(guò)淘寶的吧，沒(méi)有上過(guò)淘寶的同學(xué)估計(jì)也沒(méi)幾個(gè)了，但是我相信大多數(shù)的人都是在淘寶上面買完?yáng)|西就下線，很少有人會(huì)關(guān)注淘寶上的設(shè)計(jì)這類的，但是對(duì)于普通人這樣還行，但是對(duì)于一個(gè)程序員這樣就可不行了，因?yàn)椴┲鞅救耸菑氖虑岸朔矫娴墓ぷ鳎跃屯ㄟ^(guò)仿照淘寶的設(shè)計(jì)樣式，以求在技能上面能夠有一個(gè)大的突破

一、淘寶分頁(yè)控件了解

先上一張?zhí)詫毜姆猪?yè)圖片：

根據(jù)上圖中對(duì)淘寶分頁(yè)控件的分析，我們大致上可以將淘寶分頁(yè)控件分成兩部分，一部分是核心部分，這一部分主要就是一個(gè)分頁(yè)的核心功能，這個(gè)功能同時(shí)也是也是不可或缺的，還有一部分是拓展部分，這一部分是相當(dāng)于增加一些功能來(lái)增強(qiáng)和改善用戶體驗(yàn)的，但是在很多現(xiàn)成的分頁(yè)控件是沒(méi)有實(shí)現(xiàn)的(這個(gè)也是一個(gè)自己造輪子的理由之一)。但是依據(jù)我對(duì)淘寶分頁(yè)控件的理解再結(jié)合工作上面的需求分析，我認(rèn)為淘寶的分頁(yè)控件要改成具有普適性的業(yè)務(wù)功能控件還需要有這些改動(dòng)：

1、比如拓展部分感覺(jué)比較偏小了一點(diǎn)，以我個(gè)人的體驗(yàn)上來(lái)說(shuō)不是挺好

2、由于淘寶的寶貝比較多，所以只需要顯示到一百頁(yè)就行了，但是在實(shí)際的項(xiàng)目中我們可能沒(méi)有100頁(yè)，所以我們需要顯示到最后一頁(yè)的頁(yè)數(shù)就行了

3、由于拓展部分不是必須的，只是可以增強(qiáng)用戶體驗(yàn)，但是有些時(shí)候頁(yè)面給分頁(yè)預(yù)留的位置不夠，這個(gè)時(shí)候我們就可以通過(guò)設(shè)置來(lái)除去這一部分

二、基于bootstrap的仿淘寶分頁(yè)控件輸入?yún)?shù)設(shè)定

想一想，對(duì)于普通的分頁(yè)控件，我們需要什么元素：pageNo(當(dāng)前頁(yè))，pageSize(每頁(yè)渲染個(gè)數(shù))，count(總數(shù)),這幾個(gè)控件是必不可少的，pageNo主要是用來(lái)標(biāo)識(shí)要渲染第幾頁(yè)為當(dāng)前頁(yè)，pageSize和count主要是用來(lái)計(jì)算出要渲染的頁(yè)數(shù)(pageCount)，pageCount的實(shí)現(xiàn)邏輯如下：

var pageCount=0;
if(count%pageSize==0){
    pageCount=count/pageSize;
}esle{
    pageCount=count/pageSize+1;
}

這樣我們就能保證了pageCount為我們所要渲染的最終的頁(yè)數(shù)，除了這個(gè)基礎(chǔ)配置還有一些其他的配置我認(rèn)為也是需要增加的

1、增加對(duì)最后一個(gè)確定按鈕的名稱修改，這個(gè)可能在我們的業(yè)務(wù)中不叫確定而叫修改之類的名稱，所以如果有一個(gè)可以修改的功能，那么也方便了業(yè)務(wù)的拓展（default:"確定"）

2、主色調(diào)修改，我們知道像淘寶的分頁(yè)控件采用的是橙黃色的主色調(diào)，然后如果是按照經(jīng)典的bootstrap的配色方案來(lái)看，是采用淺藍(lán)色的，所以這個(gè)也要支持修改(default:lightblue)

3、支持showNum的配置，showNum指的是當(dāng)pageNo=1的時(shí)候要顯示的頁(yè)數(shù)，例如淘寶的分頁(yè)控件顯示的是1到5頁(yè)外加一個(gè)省略號(hào)。所以showNum=5，表示顯示5頁(yè);(default:6)

4、支持skipPart，這一部分指的就是分頁(yè)控件的拓展部分，這部分我們應(yīng)該要按照需求來(lái)決定是否顯示（default:true）

 * 括號(hào)內(nèi)為參數(shù)的默認(rèn)值

三、基于bootstrap仿淘寶插件設(shè)計(jì)思路

 根據(jù)對(duì)淘寶網(wǎng)站的觀察，以及對(duì)對(duì)其設(shè)計(jì)上面的思考，我認(rèn)為大致上的插件設(shè)計(jì)思路如下：

第一步，接收用戶的傳入?yún)?shù)

第二步，將用戶的部分傳入?yún)?shù)傳遞給一個(gè)分頁(yè)算法，然后通過(guò)分頁(yè)算法將一些最終要渲染的結(jié)果通過(guò)JSON的形式返回出來(lái)

第三步，對(duì)JSON數(shù)據(jù)進(jìn)行渲染使其最終生成分頁(yè)控件

這樣的設(shè)計(jì)主要是符合軟件工程的高內(nèi)聚、低耦合的設(shè)計(jì)思想，通過(guò)這個(gè)設(shè)計(jì)即使分頁(yè)算法的實(shí)現(xiàn)相對(duì)的困難，但是我們卻把分頁(yè)的渲染與算法的實(shí)現(xiàn)分離開來(lái)，有利于后期功能的拓展，提高了組件的可維護(hù)性。

四、分頁(yè)算法的設(shè)計(jì)

 其實(shí)這一塊的分頁(yè)算法頁(yè)說(shuō)不上設(shè)計(jì)，純粹的就是模仿吧，模范淘寶的分頁(yè)規(guī)則，在默認(rèn)的情況下，我們會(huì)分成這樣的四種情況(以淘寶為例)

1、pageNo為1-5頁(yè)的時(shí)候，將pageNo的當(dāng)前頁(yè)改變?yōu)辄c(diǎn)擊的頁(yè)數(shù)

2、當(dāng)pageNo為6,7頁(yè)的時(shí)候，增加渲染1到當(dāng)前頁(yè)+1，例如選的是6頁(yè)的話，那么我們就渲染1~7頁(yè)

3、接著我們判斷pageNo是否大于等于pageCount(當(dāng)前頁(yè))-showNum，如果是的話，也就是說(shuō)明到了最后的那幾頁(yè)了，那么我們這個(gè)時(shí)候就要直接渲染最后的showNum頁(yè)，并把pageNo點(diǎn)亮

4、最后的一種情況：除了上面提到的這些情況，剩下的我們都是通過(guò)渲染pageNo的前2頁(yè)和pagNo的后兩頁(yè)，還有就是渲染第一頁(yè)和第二頁(yè)。

接下來(lái)就來(lái)分享一下我在分頁(yè)算法上面的設(shè)計(jì)：

//分頁(yè)算法邏輯，主要對(duì)分頁(yè)進(jìn)行邏輯運(yùn)算，不做渲染，返回值為JSON
        function PageAlgorithm(pageNo,pageSize,count,showNum){
            var data="";
            if(pageNo==1){
                data='{"algorithm":[{"text":"上一頁(yè)","num":0,"status":"disabled"}';
            }else{
                data='{"algorithm":[{"text":"上一頁(yè)","num":"'+(pageNo-1)+'","status":"abled"}';
            }
            //判斷分頁(yè)類型
            if(count>showNum){
                if(pageNo<=showNum+2){
                    //判斷pageNo是否在要初始化顯示的頁(yè)碼內(nèi)
                    if(pageNo<=showNum){
                        for(var i=1;i<=showNum;i++){
                            if(pageNo==i){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                                
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }    
                        }
                        if(pageNo==showNum){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }else{
                        for(var i=1;i<=pageNo;i++){


                            if(i==pageNo){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }
                        }
                        if(pageNo!=count){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    //選中最后一頁(yè)時(shí)，將省略號(hào)隱藏
                    if(pageNo!=count){
                        if(pageNo!=(count-1)){
                            data+=',{"text":"…","num":"more","status":""}';
                        }
                        
                    }
                    
                }else if(pageNo>count-showNum){
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=count-showNum+1;i<=count;i++){
                        if(pageNo==i){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                }
                else{
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=pageNo-2;i<=pageNo+2;i++){
                        if(i==pageNo){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                }
            }else{                
                for(var i=1;i<=count;i++){
                    if(pageNo==i){
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                    }else{
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                    }


                }
                
            }
            if(pageNo==count){
                data+=',{"text":"下一頁(yè)","num":"'+(pageNo+1)+'","status":"disabled"}]}';
            }else{
                data+=',{"text":"下一頁(yè)","num":"'+(pageNo+1)+'","status":"abled"}]}';
            }
            var json_return = JSON.parse(data);
            return json_return;


        }

注：不必關(guān)注里面的JSON最終要呈現(xiàn)的格式，主要的原因是這些參數(shù)最終是要傳遞到下一個(gè)方法中去渲染分頁(yè)控件，而這些相當(dāng)于是在兩個(gè)方法中約定的，我們主要要關(guān)注的是怎樣對(duì)分頁(yè)控件進(jìn)行類型上的區(qū)別，從而渲染出不同的JSON數(shù)據(jù)

五、jPage.js插件說(shuō)明

 這一款插件就是本次教程的一個(gè)最終的產(chǎn)物，這一款插件在實(shí)現(xiàn)方案上面是仿照淘寶的邏輯，但是由于公司的主營(yíng)業(yè)務(wù)與淘寶的業(yè)務(wù)上面有些區(qū)別，所以樣式風(fēng)格不太一致。但是也是能夠很好的滿足一般業(yè)務(wù)上面常見的需求。

具體怎么使用，我們來(lái)舉個(gè)例子

我們要得到這樣的一個(gè)分頁(yè)控件，總數(shù)據(jù)為70條，每頁(yè)顯示3條數(shù)據(jù)，并且要顯示拓展部分，我們只需要如下這樣去調(diào)用就行了。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="jPage.js"></script>
    <script type="text/javascript">
        $("#test").page({count:70,pageSize:3,skipPart:true});
        
    </script>
</body>
</html>

最終的效果如下：

下載地址

轉(zhuǎn)自https://www.cnblogs.com/st-leslie/p/6029804.html 作者熱衷理財(cái)?shù)募夹g(shù)渣渣