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);