摘要：避免函數(shù)體內(nèi)和外部的變量沖突。實(shí)參分別接受對(duì)象，對(duì)象都是全局環(huán)境下的，而在函數(shù)體內(nèi)的其實(shí)是局部變量，不是全局的對(duì)象。

查看效果

;(function ($, window, document, undefined) {
    "use strict";
    function Paging(element, options) {
        this.element = element;
        this.options = {
            pageNum: options.pageNum || 1, // 當(dāng)前頁(yè)碼
            totalNum: options.totalNum, // 總頁(yè)碼
            totalList: options.totalList, // 數(shù)據(jù)總記錄
            callback: options.callback // 回調(diào)函數(shù)
        };
        this.init();
    }
    Paging.prototype = {
        constructor: Paging,
        init: function () {
            this.createHtml();
            this.bindEvent();
        },
        createHtml: function () {
            var me = this;
            var content = [];
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            var totalList = me.options.totalList;
            content.push("首頁(yè)上一頁(yè)");
            // 總頁(yè)數(shù)大于6必顯示省略號(hào)
            if (totalNum > 6) {
                // 1、當(dāng)前頁(yè)碼小于5且總頁(yè)碼大于6 省略號(hào)顯示后面+總頁(yè)碼
                if (pageNum < 5) {
                    // 1與6主要看要顯示多少個(gè)按鈕 目前都顯示5個(gè)
                    for (var i = 1; i < 6; i++) {
                        if (pageNum !== i) {
                            content.push("" + i + "");
                        } else {
                            content.push("" + i + "");
                        }
                    }
                    content.push(". . .");
                    content.push("" + totalNum + "");
                } else {
                    // 2、當(dāng)前頁(yè)碼接近后面 中間隔3個(gè) 省略號(hào)顯示后面+總頁(yè)面
                    if (pageNum < totalNum - 3) {
                        for (var i = pageNum - 2; i < pageNum + 3; i++) {
                            if (pageNum !== i) {
                                content.push("" + i + "");
                            } else {
                                content.push("" + i + "");
                            }
                        }
                        content.push(". . .");
                        content.push("" + totalNum + "");
                    } else {
                        // 3、頁(yè)碼至少在5，最多在【totalNum - 3】的中間位置 第一頁(yè)+省略號(hào)顯示前面
                        content.push("" + 1 + "");
                        content.push(". . .");
                        for (var i = totalNum - 4; i < totalNum + 1; i++) {
                            if (pageNum !== i) {
                                content.push("" + i + "");
                            } else {
                                content.push("" + i + "");
                            }
                        }
                    }
                }
            } else {
                // 總頁(yè)數(shù)小于6
                for (var i = 1; i < totalNum + 1; i++) {
                    if (pageNum !== i) {
                        content.push("" + i + "");
                    } else {
                        content.push("" + i + "");
                    }
                }
            }
            content.push("尾頁(yè)下一頁(yè)");
            content.push(" 共 " + totalNum + " 頁(yè) ");
            content.push(" 共 " + totalList + " 條記錄 ");
            me.element.html(content.join(""));

            // DOM重新生成后每次調(diào)用是否禁用button
            setTimeout(function () {
                me.dis();
            }, 20);
        },
        bindEvent: function () {
            var me = this;
            me.element.off("click", "button");
            // 委托新生成的dom監(jiān)聽(tīng)事件
            me.element.on("click", "button", function () {
                var id = $(this).attr("id");
                var num = parseInt($(this).html());
                var pageNum = me.options.pageNum;
                if (id === "prePage") {
                    if (pageNum !== 1) {
                        me.options.pageNum -= 1;
                    }
                } else if (id === "nextPage") {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum += 1;
                    }
                } else if (id === "firstPage") {
                    if (pageNum !== 1) {
                        me.options.pageNum = 1;
                    }
                } else if (id === "lastPage") {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum = me.options.totalNum;
                    }
                } else {
                    me.options.pageNum = num;
                }
                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.pageNum);
                }
            });
        },
        dis: function () {
            var me = this;
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            if (pageNum === 1) {
                me.element.children("#firstPage, #prePage").prop("disabled", true);
            } else if (pageNum === totalNum) {
                me.element.children("#lastPage, #nextPage").prop("disabled", true);
            }
        }
    };
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);

jQuery插件友情鏈接

// 1、代碼最前面的分號(hào)，可以防止多個(gè)文件壓縮合并以為其他文件最后一行語(yǔ)句沒(méi)加分號(hào)，而引起合并后的語(yǔ)法錯(cuò)誤。
// 2、匿名函數(shù)(function(){})();：由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面，所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。避免函數(shù)體內(nèi)和外部的變量沖突。
// 3、$實(shí)參:$是jquery的簡(jiǎn)寫(xiě)，很多方法和類庫(kù)也使用$,這里$接受jQuery對(duì)象，也是為了避免$變量沖突，保證插件可以正常運(yùn)行。
// 4、window, document實(shí)參分別接受window, document對(duì)象，window, document對(duì)象都是全局環(huán)境下的，而在函數(shù)體內(nèi)的window, document其實(shí)是局部變量，不是全局的window, document對(duì)象。這樣做有個(gè)好處就是可以提高性能，減少作用域鏈的查詢時(shí)間，如果你在函數(shù)體內(nèi)需要多次調(diào)用window 或 document對(duì)象，這樣把window 或 document對(duì)象當(dāng)作參數(shù)傳進(jìn)去，這樣做是非常有必要的。當(dāng)然如果你的插件用不到這兩個(gè)對(duì)象，那么就不用傳遞這兩個(gè)參數(shù)了。
// 5、undefined形參了，看起來(lái)是有點(diǎn)多余。undefined在老一輩的瀏覽器是不被支持的，直接使用會(huì)報(bào)錯(cuò)，js框架要考慮到兼容性，因此增加一個(gè)形參undefined