JavaScript学习之路——分页类

在之前开发项目中，就一直想写一个分页类来去完成一些小数据的页面分页渲染工作。再之前工作的时候又不想调用第三方插件。所以基本上在展示数据量比较少的页面的时候，就直接用滚动来解决了。直到昨天有位新人问起分页相关问题的时候，发现自己的类库中始终缺少这么一个基本插件。于是趁着刚好有时间，赶紧写了一个，功能上勉强凑合着用。

总结：
在写的时候遇上了点小麻烦，根本原因在于对JavaScript中的对象概念理解不够深。在给对象中一个变量赋值自身某个对象属性的时候，其赋值结果是将该对象的地址赋值给该变量，而非变量值。自己编了一个小例子，加深理解。
代码：

var person  = {    who : function() {        this.student = {            name : 'jack'        };        console.log(this.student.name); // jack        var me = this.getPerson();        me.name = 'tom'; // 原以为是me获取到的是student的值，其实是地址。所以在这里me就是this.student。        console.log(this.student.name) // tom    }    getPerson : function() {        return this.student;    }}

// @charset "utf-8";/** * @function : 分页小插件 * @author   : yinggaozhen * @create   : 2016-03-25 19:07 * @version  : 0.0.0 * @example  :     $('#page').pageshow({        data        : data,    // 必须为数组        style       : 'manu',  // 样式显示        perPage     : 4,       // 每页显示        renderFunc  : function(callbackdata) {            console.log(callbackdata); // 当前页数数据        }    }); */ (function($, window, undefined) {    var ext = 'pageshow';    var DEFAULT = {        data        : [],        style       : 'manu',        perPage     : 10,        rollPage    : 5,        jumpTag     : 'gz-jump-page',        renderTpl   :   {            first       : '首页',            last        : '末页',            prev        : '上一页',            next        : '下一页',            header      : '条记录',            theme       : '%totalRow% %header% %nowPage%/%totalPage% %first%  %prevPage%  %linkPage% %nextPage% %last%'        },        renderFunc : function() {}    };    var PageShow = function(element, option) {        this.init(element, option);    };    PageShow.prototype = {        init : function(element, option) {            this.$el = $(element);            this.opt        = option;            this.renderData = {};            var totalRow  = this.opt.data.length || 0,                totalPage = Math.ceil(totalRow / parseInt(this.opt.perPage));            this.setRenderData({                nowPage     : 1,                totalRow    : totalRow,                totalPage   : totalPage,                header      : this.opt.renderTpl.header            });            this.$el.addClass(this.opt.style);            this.bindEvt();            this.pageshow();        },        bindEvt : function() {            var me = this;            me.$el.on('click', '['+ me.opt.jumpTag + ']', function(e) {                if(!me.setNowPage($(this).attr(me.opt.jumpTag))) return;                me.pageshow();                me.opt.renderFunc(me.getLinkData());            });        },        pageshow : function() {            var me  = this;            me.$el.empty();            var renderData = me.getRenderData('', false);            if (!renderData.totalRow) return '';            var nowRollPage = Math.ceil(renderData.nowPage / me.opt.rollPage);            // 上一页            if (renderData.nowPage - 1 > 0) {                renderData.prevPage = me.getRenderTag(renderData.nowPage - 1, me.opt.renderTpl['prev']);            }            // 下一页            if (renderData.nowPage + 1 < renderData.totalPage) {                renderData.nextPage = me.getRenderTag(renderData.nowPage + 1, me.opt.renderTpl['next']);                }            // 首页            if (renderData.nowPage !== 1) {                renderData.first = me.getRenderTag(1, me.opt.renderTpl['first']);            }            // 尾页            if (renderData.nowPage !== renderData.totalPage) {                renderData.last = me.getRenderTag(renderData.totalPage, me.opt.renderTpl['last']);            }            renderData.linkPage = '';            for (var i = 1; i <= me.opt.rollPage; i++) {                var nPage  = (nowRollPage - 1) * me.opt.rollPage + i;                if (nPage > renderData.totalPage) continue;                renderData.linkPage += me.getRenderTag(nPage, '第' + nPage + '页   ', nPage == renderData.nowPage ? 'current' : '');            }            me.$el.append(me.opt.renderTpl.theme.replace(/%(\w+)%/g, function(p, $1) {                return renderData[$1] ? renderData[$1] : '';            }));        },        setRenderData : function(newRenderData) {            var me = this;            me.renderData = $.extend({}, me.getRenderData(), newRenderData);        },        getRenderData : function(key, isProp) {            key     = key || '';            isProp  = isProp === false ? false : true;            if (key === '') return isProp ? (this.renderData || {}): $.extend({}, this.renderData);            return typeof this.renderData[key] !== 'undefined' ? this.renderData[key] : '';        },        getLinkData : function() {            var startRow = (this.getRenderData().nowPage - 1) * this.opt.perPage,                endRow   = startRow + this.opt.perPage;            return this.opt.data.slice(startRow, endRow);        },        setNowPage : function(page) {            page = page && parseInt(page);            if (!page) return false;            return this.getRenderData().nowPage = page;        },        getRenderTag : function(jumpPage, jumpName, jumpStyle) {            return $('<a>').attr(this.opt.jumpTag, jumpPage).html(jumpName).addClass(jumpStyle).prop('outerHTML');        }    };    var Plugins = function(option) {        option = $.extend(true, {}, DEFAULT, option);        return this.each(function() {            new PageShow(this, option);        });    };    $.fn[ext] = Plugins; })(jQuery, window);