jQuery插件编写学习+实例——无限滚动

　　最近自己在搞一个网站，需要用到无限滚动分页，想想工作两年有余了，竟然都没有写过插件，实在惭愧，于是简单学习了下jQuery的插件编写，然后分享出来。

 

先说下基础知识，基本上分为两种，一种是对象级别的插件，另一种是全局级别的插件。对象级别的插件就像是实例方法，它是属于实例对象的，而全局级别的相当于静态方法，是属于类的，调用起来自然也就不一样，对于全局级别的插件我们自然是使用jQuery来调用，比如$.NPScrollLoad(....)，对象级别的插件自然是应用与jQuery对象上了，比如:$("selector").NPScrollLoad(...)。这个不难理解吧。

对于$.NPScrollLoad()这种形式，我们要对jQuery进行扩展，怎么扩展呢，很简单，就像给对象赋值一样

方法1：

方法2：

这就是在博客园，发布博客界面测试的，F12打开开发者工具，切换到Console，先输入运行"$"，确认页面引入了jQuery，然后扩展jQuery，一种方法是直接给属性名赋值$.youname = function(){...}，另一种方法是使用$.extend({yourname:function(){...}})，使用哪种看个人喜好。

 

对于$("selector").NPScrollLoad()这种方式，扩展就不是jQuery本身了，而是jQuery.fn：

方法1：

方法2：

和全局级别的插件方法区别就是扩展的时$.fn而不是$。

 

因为各式各样的插件很多，属性重名的概率很高，为了避免这样那样的问题，我们使用闭包来写插件，从而使插件的变量和function和其他的不互相影响，这个我尽量简化：

;(function($) {
    // jQuery扩展
    $.youname = function([args]) {
        // TODO
    };
    // 或者
    $.extend({
        youname : function() {
            // TODO
        }
    });
    
    // jQuery对象扩展
    $.fn.youname = function([args]) {
        // TODO
    };
    // 或者
    $.fn.extend({
        youname : function() {
            // TODO
        }
    });
}) (jQuery);

 

为什么要这样写？看下面的例子你就明白了：

这个其实就相当于我们直接执行一个匿名函数，并且传递给他一个参数，比如上面的例子就是，我们定义了一个匿名函数用来alert传进去的参数，然后我们给它传递"hello!"，它就会马上执行，把插件的相关方法写到这里面并且引入这个js文件的话也就会在第一时间把我们的插件扩展到jQuery上，从而可以直接使用，并且可以保护我们的代码不受外面代码影响，也不会污染其他的代码。为了防止以后压缩代码的时候出错，所以最好在前后都加上一个分号";"。

 

为了让我们的插件足够通用，我们需要把一些配置留给用户自己定义，通用的做法是使用一个对象来承载所有的设置项，并给他们默认值。

var defaults = {
    msg1: "hello1",
    msg2: "hello2"
}

然后我们给我们的插件函数加上参数：

;(function($) {
    var defaults = {
    msg1: "hello1",
    msg2: "hello2"
    };

    $.NPScrollLoad = function(options) {
        var opts = $.extend(defaults, options);
        alert(opts.msg1 + opts.msg2);
    };

}) (jQuery);

 

然后就可以调用了

$.NPScrollLoad({msg1 : "你好"});
$.NPScrollLoad({msg1 : "你好", msg2 : "呵呵"});
$.NPScrollLoad({msg2 : "......"});
$.NPScrollLoad();

没有赋值的属性会使用defaults里面定义的默认值，赋值的属性则会覆盖defaults中相应的属性。

 

下面是我写的插件代码，代码有些地方比较拙劣，懒得设计和修改了。。。

/**
 * 无限滚动
 * 作者：Null Pointer
 */
 ;(function($) {
    $.NPScrollLoad = function(options) {
        // var opts = $.extend($.NPScrollLoad.defaults, options);
        $.NPScrollLoad.defaults = $.extend($.NPScrollLoad.defaults, options);
        return $(window).scroll(function() {
            processor.process();
        });
    };

    var processor = {
        timeoutId: null,
        process: function () {
            clearTimeout(this.timeoutId);
            this.timeoutId = setTimeout(function () {
                loadData();
            }, 400);
        }
    };

    /**
     * 加载数据
     */
    function loadData() {
        if (($(document).height() - ($(document).scrollTop() + $(window).height())) <= $.NPScrollLoad.defaults.offsetPixelToLoad) {
            $(window).unbind("scroll");
            $.NPScrollLoad.preLoad();
            $.post(
                $.NPScrollLoad.defaults.url,
                { pageIndex : $.NPScrollLoad.defaults.pageIndex },
                function (data) {
                    $.each(data, function (i, item) {
                        $.NPScrollLoad.handleResult(item);
                    });
                    $.NPScrollLoad.afterLoad();
                    $.NPScrollLoad.defaults.pageIndex++;
                    if (data.length < $.NPScrollLoad.defaults.pageSize) {
                        $.NPScrollLoad.noMoreData();
                    } else if ($.NPScrollLoad.defaults.pageIndex == $.NPScrollLoad.defaults.maxPage) {
                         $.NPScrollLoad.reachMaxPage();
                    } else {
                        $(window).bind("scroll", processor.process)
                    }
                }
            );
        }
    };


    /**
     * 处理
     */
    $.NPScrollLoad.handleResult = function(jsonItem) {

    };

    /**
     * 加载之前
     */
    $.NPScrollLoad.preLoad = function() {
        $("#loading").fadeIn();
    };

    /**
     * 加载之后
     */
    $.NPScrollLoad.afterLoad = function() {
        $("#loading").fadeOut();
    };

    /**
     *  无更多数据
     */
    $.NPScrollLoad.noMoreData = function() {
        $("#nomoreresult").fadeIn();
    };

    /**
     * 到达最大页数
     */
    $.NPScrollLoad.reachMaxPage = function() {
        $("#loadmore").show();
    };

    $.NPScrollLoad.defaults = {
        /* 距离底部距离(开始加载数据) */
        offsetPixelToLoad : 100,
        url : "",
        pageSize : 10,
        maxPage : 5,
        pageIndex : 1
    };

})(jQuery);

 

 

代码中有一部分是我之前没有说到的细节：

1.我把defaults定义成$.NPScrollLoad.defaults这样用户可以在外部直接设置默认值，比如$.NPScrollLoad.defaults.url = "text.aspx";这样就行了。

2.在(function($){})(jQuery)内部定义的function是私有的，只有此function内可以访问，比如loadData就只可以在此匿名函数内部访问。

3.我把部分function写成jQuery的扩展，用户就可以在外部访问，或者自定义，比如$.NPScrollLoad.handleResult这样就可以间接实现类似于函数重写的功能，让用户自定义部分操作。

4.第九行我加了一个return，这里是为了延续jQuery的链式调用，比如$("selector").val("abc").attr("id", "aaa")。。。。因为jQuery的函数本身都是返回自身的，所以$(window).scroll()也会返回$(window)，所以最后的return可以延续其链式调用特性，不过，因为我写的是全局扩展，所以也就谈不上链式调用了。。。这个对于对象扩展还是有一定重要性的。

5.定义processor对象是因为实时监听scroll事件灰常消耗资源，没滑过1px都会触发事件，所以加个延迟时间，让其一定时间内如果触发的话就取消前一次事件。代码应该不难理解。

下面是调用代码：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.NPScrollLoad.1.0.js"></script>
<script type="text/javascript">
$(function() {
    var contextPath = "${pageContext.request.contextPath}";
    $.NPScrollLoad({url:contextPath + "/ajaxPage/home"});
});
</script>

 

 

本来还想排版，这么晚了，算了，睡觉了。