摘要:避免函數體內和外部的變量沖突。實參分別接受對象,對象都是全局環境下的,而在函數體內的其實是局部變量,不是全局的對象。
查看效果
HTMLJS
;(function ($, window, document, undefined) { "use strict"; function Paging(element, options) { this.element = element; this.options = { pageNum: options.pageNum || 1, // 當前頁碼 totalNum: options.totalNum, // 總頁碼 totalList: options.totalList, // 數據總記錄 callback: options.callback // 回調函數 }; 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(""); // 總頁數大于6必顯示省略號 if (totalNum > 6) { // 1、當前頁碼小于5且總頁碼大于6 省略號顯示后面+總頁碼 if (pageNum < 5) { // 1與6主要看要顯示多少個按鈕 目前都顯示5個 for (var i = 1; i < 6; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } content.push(". . ."); content.push(""); } else { // 2、當前頁碼接近后面 中間隔3個 省略號顯示后面+總頁面 if (pageNum < totalNum - 3) { for (var i = pageNum - 2; i < pageNum + 3; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } content.push(". . ."); content.push(""); } else { // 3、頁碼至少在5,最多在【totalNum - 3】的中間位置 第一頁+省略號顯示前面 content.push(""); content.push(". . ."); for (var i = totalNum - 4; i < totalNum + 1; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } } } } else { // 總頁數小于6 for (var i = 1; i < totalNum + 1; i++) { if (pageNum !== i) { content.push(""); } else { content.push(""); } } } content.push(""); content.push(" 共 " + totalNum + " 頁 "); content.push(" 共 " + totalList + " 條記錄 "); me.element.html(content.join("")); // DOM重新生成后每次調用是否禁用button setTimeout(function () { me.dis(); }, 20); }, bindEvent: function () { var me = this; me.element.off("click", "button"); // 委托新生成的dom監聽事件 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、代碼最前面的分號,可以防止多個文件壓縮合并以為其他文件最后一行語句沒加分號,而引起合并后的語法錯誤。
// 2、匿名函數(function(){})();:由于Javascript執行表達式是從圓括號里面到外面,所以可以用圓括號強制執行聲明的函數。避免函數體內和外部的變量沖突。
// 3、$實參:$是jquery的簡寫,很多方法和類庫也使用$,這里$接受jQuery對象,也是為了避免$變量沖突,保證插件可以正常運行。
// 4、window, document實參分別接受window, document對象,window, document對象都是全局環境下的,而在函數體內的window, document其實是局部變量,不是全局的window, document對象。這樣做有個好處就是可以提高性能,減少作用域鏈的查詢時間,如果你在函數體內需要多次調用window 或 document對象,這樣把window 或 document對象當作參數傳進去,這樣做是非常有必要的。當然如果你的插件用不到這兩個對象,那么就不用傳遞這兩個參數了。
// 5、undefined形參了,看起來是有點多余。undefined在老一輩的瀏覽器是不被支持的,直接使用會報錯,js框架要考慮到兼容性,因此增加一個形參undefined
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103170.html
摘要:用分布函數來制作分頁鏈接,可以省下很多代碼流量呢看看跳轉到頁之后只要這么引用它就好了 用JavaScript分布函數來制作分頁鏈接,可以省下很多html代碼流量呢!看看 (function($){ $.fn.pagination=function(pagecount,page,surl){ var $box=$(this).empty();var shtml= if(pagecoun...
摘要:插件的使用正在熟悉項目上的代碼,新添加了一個需要,需要對表單進行分頁,之前的代碼中是有分頁的代碼的,看了老半天,也沒看太明白。 jQuery插件simplePagination的使用 正在熟悉項目上的代碼,新添加了一個需要,需要對表單進行分頁,之前的代碼中是有分頁的代碼的,看了老半天,也沒看太明白。之前的項目比較久遠,繼續熟悉代碼。 simplePagination的使用 HTML頁面...
摘要:插件的使用正在熟悉項目上的代碼,新添加了一個需要,需要對表單進行分頁,之前的代碼中是有分頁的代碼的,看了老半天,也沒看太明白。 jQuery插件simplePagination的使用 正在熟悉項目上的代碼,新添加了一個需要,需要對表單進行分頁,之前的代碼中是有分頁的代碼的,看了老半天,也沒看太明白。之前的項目比較久遠,繼續熟悉代碼。 simplePagination的使用 HTML頁面...
摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設計模式》《J...
閱讀 952·2021-11-24 09:39
閱讀 2689·2021-09-26 09:55
閱讀 14154·2021-08-23 09:47
閱讀 3577·2019-08-30 15:52
閱讀 848·2019-08-29 13:49
閱讀 997·2019-08-23 18:00
閱讀 844·2019-08-23 16:42
閱讀 1635·2019-08-23 14:28