layui-laypage模塊代碼詳解

/** layui-v2.4.0 MIT License By https://www.layui.com */
;
layui.define(function(e) {
    "use strict";
    var a = document,
        t = "getElementById",
        n = "getElementsByTagName",
        i = "laypage",
        r = "layui-disabled",
        u = function(e) {
            var a = this;
            // 實例化的時候調用了render方法，layui.laypage不存在，即接口還未對外exports時，index為0
            console.log("初次索引：%c" + s.index, "color: red;");
            // u是一個構造函數，此處的this將為u實例化后的實例。
            // 並且索引在每次render之后增一。
            // 並render，!0代表初次render。
            a.config = e || {}, a.config.index = ++s.index, a.render(!0)
        };
    u.prototype.type = function() {
        var e = this.config;
        console.log("判斷分頁容器元素是否為對象：%c" + ("object" == typeof e.elem ? 'yes' : 'no'), 'color: blue;');
        if ("object" == typeof e.elem) {
            console.log("分頁容器元素：", e.elem);
            // document.getElementById的length是undefin，而jquery的是數值。
            return void 0 === e.elem.length ? 2 : 3
        } else {
            console.log("分頁容器元素：%c" + e.elem, "color: blue;");
        }
    }, u.prototype.view = function() {
        var e = this,
            a = e.config,
            // 判斷是否傳入了groups，是則對其邏輯或運算，目的轉為數字，否則賦默認值5
            t = a.groups = "groups" in a ? 0 | a.groups : 5;
        // layout 如果已賦值且為對象，使用它，否則為默認["prev", "page", "next"]， 其他配置參數也進行邏輯或運算，保證為數字或有默認值
        // 邏輯或還能向上取整，3.4214 | 1，對groups進行處理，負數或者大於頁碼數
        a.layout = "object" == typeof a.layout ? a.layout : ["prev", "page", "next"], a.count = 0 | a.count, a.curr = 0 | a.curr || 1, a.limits = "object" == typeof a.limits ? a.limits : [10, 20, 30, 40, 50], a.limit = 0 | a.limit || 10, a.pages = Math.ceil(a.count / a.limit) || 1, a.curr > a.pages && (a.curr = a.pages), t < 0 ? t = 1 : t > a.pages && (t = a.pages), a.prev = "prev" in a ? a.prev : "&#x4E0A;&#x4E00;&#x9875;", a.next = "next" in a ? a.next : "&#x4E0B;&#x4E00;&#x9875;";
        var n = a.pages > t ? Math.ceil((a.curr + (t > 1 ? 1 : 0)) / (t > 0 ? t : 1)) : 1,
            i = {
                prev: function() {
                    return a.prev ? '<a href="javascript:;" class="layui-laypage-prev' + (1 == a.curr ? " " + r : "") + '" data-page="' + (a.curr - 1) + '">' + a.prev + "</a>" : ""
                }(),
                page: function() {
                    var e = [];
                    if (a.count < 1) return "";
                    n > 1 && a.first !== !1 && 0 !== t && e.push('<a href="javascript:;" class="layui-laypage-first" data-page="1"  title="&#x9996;&#x9875;">' + (a.first || 1) + "</a>");
                    var i = Math.floor((t - 1) / 2),
                        r = n > 1 ? a.curr - i : 1,
                        u = n > 1 ?
                            function() {
                                var e = a.curr + (t - i - 1);
                                return e > a.pages ? a.pages : e
                            }() : t;
                    for (u - r < t - 1 && (r = u - t + 1), a.first !== !1 && r > 2 && e.push('<span class="layui-laypage-spr">&#x2026;</span>'); r <= u; r++) r === a.curr ? e.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" ' + (/^#/.test(a.theme) ? 'style="">+ a.theme + ';"' : "") + "></em><em>" + r + "</em></span>") : e.push('<a href="javascript:;" data-page="' + r + '">' + r + "</a>");
                    return a.pages > t && a.pages > u && a.last !== !1 && (u + 1 < a.pages && e.push('<span class="layui-laypage-spr">&#x2026;</span>'), 0 !== t && e.push('<a href="javascript:;" class="layui-laypage-last" title="&#x5C3E;&#x9875;"  data-page="' + a.pages + '">' + (a.last || a.pages) + "</a>")), e.join("")
                }(),
                next: function() {
                    return a.next ? '<a href="javascript:;" class="layui-laypage-next' + (a.curr == a.pages ? " " + r : "") + '" data-page="' + (a.curr + 1) + '">' + a.next + "</a>" : ""
                }(),
                count: '<span class="layui-laypage-count">共 ' + a.count + " 條</span>",
                limit: function() {
                    var e = ['<span class="layui-laypage-limits"><select lay-ignore>'];
                    return layui.each(a.limits, function(t, n) {
                        e.push('<option value="' + n + '"' + (n === a.limit ? "selected" : "") + ">" + n + " 條/頁</option>")
                    }), e.join("") + "</select></span>"
                }(),
                refresh: ['<a href="javascript:;" data-page="' + a.curr + '" class="layui-laypage-refresh">', '<i class="layui-icon layui-icon-refresh"></i>', "</a>"].join(""),
                skip: function() {
                    return ['<span class="layui-laypage-skip">&#x5230;&#x7B2C;', '<input type="text" min="1" value="' + a.curr + '" class="layui-input">', '&#x9875;<button type="button" class="layui-laypage-btn">&#x786e;&#x5b9a;</button>', "</span>"].join("")
                }()
            };
        return ['<div class="layui-box layui-laypage layui-laypage-' + (a.theme ? /^#/.test(a.theme) ? "molv" : a.theme : "default") + '" id="layui-laypage-' + a.index + '">', function() {
            var e = [];
            return layui.each(a.layout, function(a, t) {
                i[t] && e.push(i[t])
            }), e.join("")
        }(), "</div>"].join("")
    }, u.prototype.jump = function(e, a) {
        // e是配置或獲取到的page元素
        console.log("跳轉后傳入渲染元素：", e);
        // render之后執行jump，做的事兒有：
        // 1. 初始化則獲取輸入框值，渲染翻頁。
        // 2. 對所有a元素進行事件綁定。
        // 3. select的事件綁定。
        // 4. button的事件綁定。
        if (e) {
            var t = this,
                i = t.config,
                r = e.children,
                // 點擊按鈕，即輸入后的確認按鈕
                u = e[n]("button")[0],
                // 輸入框
                l = e[n]("input")[0],
                // 下拉菜單
                p = e[n]("select")[0],
                c = function() {
                    // 替換掉輸入框中非數字部分，確保為數字。
                    var e = 0 | l.value.replace(/\s|\D/g, "");
                    // 將curr賦值，並render，即跳轉后再次render
                    // 此處render是實例化對象上的render
                    // 即點擊確認按鈕/或初次加載后重新渲染page
                    e && (i.curr = e, t.render())
                };
            // 如果a為true，進行render，即標示了input，執行到此
            if (a) return c();
            // 循環給a元素加第點擊事件。
            for (var o = 0, y = r.length; o < y; o++)"a" === r[o].nodeName.toLowerCase() && s.on(r[o], "click", function() {
                // 獲取到頁碼數，點擊的當前頁碼頁碼數賦值給配置對象的curr，指示當前所在頁碼，並重渲染。
                var e = 0 | this.getAttribute("data-page");
                // 當前頁碼數小於1或者大於總頁碼數，則不執行賦值和重渲染。
                // 只有既不小於1又不大於總頁碼數，才賦值和重新渲染。
                e < 1 || e > i.pages || (i.curr = e, t.render())
            });
            // select事件
            p && s.on(p, "change", function() {
                var e = this.value;
                // 當前頁碼*所選值如果大於總數，則當前頁碼賦值為總頁碼/每頁顯示數的鄉下取值。
                // 然后重新渲染。
                i.curr * e > i.count && (i.curr = Math.ceil(i.count / e)), i.limit = e, t.render()
            }),
            // 輸入后的button確認事件
            u && s.on(u, "click", function() {
                c()
            })
        }
    }, u.prototype.skip = function(e) {
        // e為傳入的分頁元素對象。
        if (e) {
            var a = this,
                t = e[n]("input")[0];
            // chrome下會支持回調傳入參數。
            t && s.on(t, "keyup", function(t) {
                console.log("keyup傳入參數：", t);
                // keyup的調用對象是t
                var n = this.value,
                    i = t.keyCode;
                // 上下左右鍵，或者輸入框值為非數字，則將非數字替換為空
                // 如果為確認，執行jump方法，且傳入真。。
                /^(37|38|39|40)$/.test(i) || (/\D+/.test(n) && (this.value = n.replace(/\D/, "")), 13 === i && a.jump(e, !0))
            })
        }
    },

    // 當前render在實例化期間被調用，在s對象中render則成為實例化對象。
    u.prototype.render = function(e) {
    var n = this,
        // 傳入的配置對象
        i = n.config,
        // 獲取類型
        r = n.type(),
        // 生成view
        u = n.view();
        console.log("判斷傳入類型：%c" + r, "color: blue;");
        // console.log("render獲取到的配置：", i);
        // 判斷是原生js對象還是jquery對象，否則就調用document上的getElementById獲取dom元素，
        // 將生成的視圖賦值給它，跳轉回調存在則調用它，也即在render的時候就已經實施了對jump的調用。因此有初次調用一說。
        2 === r ? i.elem && (i.elem.innerHTML = u) : 3 === r ? i.elem.html(u) : a[t](i.elem) && (a[t](i.elem).innerHTML = u),
        // 此處調用意欲何為？此處jump是用戶傳入的回調函數，e標示是否第一次，第一次render的時候e是!0，即真
        console.log("是否第一次：", e ? '是' : '否'),
        i.jump && i.jump(i, e);
        // i.index是不斷累加的。下面的jump是構造函數上的jump
        // 在view方法中以下元素已經被渲染出來了。
        var s = a[t]("layui-laypage-" + i.index);
        // 執行jump方法並且追加hash
        n.jump(s), i.hash && !e && (location.hash = "!" + i.hash + "=" + i.curr), n.skip(s)
    };
    // e 為傳入render的配置對象
    // u 為
    // function(e) {
    //     var a = this;
    //     a.config = e || {}, a.config.index = ++s.index, a.render(!0)
    // };
    // render 創建了一個實例，返回了索引。
    var s = {
        render: function(e) {
            var a = new u(e);
            console.log("laypage原始索引：%c" + s.index, "color: red;");
            console.log("laypage配置索引：%c" + a.config.index, "color: red;");
            // 返回的index已經是增1以后的。
            return a.index
        },
        index: layui.laypage ? layui.laypage.index + 1e4 : 0,
        on: function(e, a, t) {
            // e是dom元素對象，a是事件名，t是回調
            return e.attachEvent ? e.attachEvent("on" + a, function(a) {
                // 此處a是事件對象, 兩個的區別是：ie下支持e.srcElement，ff支持e.target。
                // 指向觸發事件的元素
                a.target = a.srcElement, t.call(e, a)
                // 禁止冒泡
            }) : e.addEventListener(a, t, !1), this
        }
    };
    e(i, s);

    /**
     * 初次進入頁面
     * 調用：
     * laypage.render({
            elem: document.getElementById('laypage'), // 'laypage', $('#laypage'), document.getElementById('laypage');
            count: count,
            limit: limit,
            limits: [5, 10, 20, 30, 50],
            curr: page,
            groups: 5,
            prev: '上一頁',
            next: '下一頁',
            first: '首頁',
            last: '尾頁',
            layout: ['prev', 'page', 'next', 'first', 'last', 'limit', 'refresh', 'skip', 'count'],
            theme: '#1E9FFF',
            hash: 'curr',
            jump: function (obj, first) {
                console.log("jump后的配置：", obj);
                if (!first) {
                    pageTurn(obj.curr, obj.limit);
                }
            }
        })
     * 即s對象上的render方法
     * 實例化函數u，並將配置作為參數傳遞給u。
     * 將配置對象賦值給是實例化對象。
     * 給該配置對象設置索引，為s對象上的index加1。
     * exports向外暴露的接口laypage在use或者作為依賴引入的時候，進入內存，初始化index，為0。
     * 執行后面擴展到構造函數u上的方法render，傳入參數!0，即真，表示第一次。
     * 執行原型上的type方法，根據傳入配置對象的elem來決定類型，2（原生dom對象），3（jquery對象），undefined（字符串）。
     * 構造view html。
     * 根據上面的類型賦值給elem元素html。
     * 如果用戶設置了jump回調，第一次不執行，傳入配置對象及是否為第一次，此時為真，毫無疑問。
     * 用原生js方法取到當前page元素。
     * 執行render里的jump方法。
     * 如果該元素存在。
     * 獲取到該元素的子元素button，input和select。
     * 如果參數a為真，僅執行內部函數c，但此時為undefined，不執行c函數。執行c函數的情況是在skip中按下了enter鍵之后才會執行，前提條件是按下了上下左右方向鍵或者非數字，執行了input輸入框非數字過濾之后，再按下enter鍵，渲染page。
     * 對a元素進行循環綁定click事件，其中回調是獲取到a上的data-page頁碼，比對是否大於總頁碼或者小於1，對配置對象的curr重新賦值，並執行render。render不傳參，因此會執行用戶回調。table會重新渲染，page容器的id也會隨之而變。
     * 對select進行事件綁定，計算curr值及limit值，配置對象發生改變，然后執行無參數render，自然table會被重新渲染，執行用戶回調。
     * button確認點擊事件同理。
     * 然后render方法中改變hash值。
     * render中執行skip函數，傳入page元素。
     * 如果page為真，獲取到input元素。
     * 給他綁定keyup事件，目的是檢測按下了上下左右方向鍵或者非數字，執行input輸入框非數字過濾之后，再按下enter鍵，執行jump。
     * 此時jump第二個參數為真。不在jump里執行button，a及seelct的綁定。會執行內部函數c，render的參數為空，即非第一次調用。
     * render會調用用戶回調，並再執行jump，此時jump的第二個參數為空。執行select，a，button的事件綁定及在skip函數里執行input的keyup事件綁定。
     * 結束
     *
     * 模擬點擊頁碼3
     * 此時初次render已經結束。
     * 點擊頁碼3發生，即執行了a上綁定的click事件。
     * 此時獲取到頁碼3。
     * 判斷頁碼是否小於1大於總頁碼，不是，賦值給配置對象的curr，執行render，不傳參數。
     * this賦值給n。
     * 配置對象賦值給i。
     * 獲取到type值為undefined，假設配置中寫的是字符串。
     * 生成view。
     * 將view結果賦值給指定id元素。
     * 判斷是否設置了用戶回調。
     * 是，執行回調。此時render傳入參數為空，即假。回調中如果設置了if(!first){}則會執行。
     * 當前系統中會重新渲染table。
     * 獲取當前page容器元素。因為點擊過后，執行了用戶回調，而用戶回調中再次調用了laypage.render，所以index會增1。
     * 執行jump函數，傳入此容器元素。
     * 此時jump的第二個參數為假，因此在這一步就執行了button，select及a元素的事件綁定。
     * 然后hash值賦值。
     * 執行skip，為input綁定keyup事件。
     * keyup事件中檢測輸入是否為上下左右鍵以及非數字，則input中值自動過濾掉這些字符，如果按下enter，則執行jump。
     * 因為傳入第二個參數為真，因此會先執行render，因為在keyup中可能輸入的數字合法，必須要重新render。
     * 結束。
     */
});