Mikel
[转载]jQuery插件编写学习+实例——无限滚动 – Null Pointer – 博客园.
最近自己在搞一个网站，需要用到无限滚动分页，想想工作两年有余了，竟然都没有写过插件，实在惭愧，于是简单学习了下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和其他的不互相影响，这个我尽量简化：
1 ;(function($) { 2 // jQuery扩展 3 $.youname = function([args]) { 4 // TODO 5 }; 6 // 或者 7 $.extend({ 8 youname : function() { 9 // TODO 10 } 11 }); 12 13 // jQuery对象扩展 14 $.fn.youname = function([args]) { 15 // TODO 16 }; 17 // 或者 18 $.fn.extend({ 19 youname : function() { 20 // TODO 21 } 22 }); 23 }) (jQuery);
为什么要这样写？看下面的例子你就明白了：
这个其实就相当于我们直接执行一个匿名函数，并且传递给他一个参数，比如上面的例子就是，我们定义了一个匿名函数用来alert传进去的参数，然后 我们给它传递”hello!”，它就会马上执行，把插件的相关方法写到这里面并且引入这个js文件的话也就会在第一时间把我们的插件扩展到jQuery 上，从而可以直接使用，并且可以保护我们的代码不受外面代码影响，也不会污染其他的代码。为了防止以后压缩代码的时候出错，所以最好在前后都加上一个分 号”;”。
为了让我们的插件足够通用，我们需要把一些配置留给用户自己定义，通用的做法是使用一个对象来承载所有的设置项，并给他们默认值。
1 var defaults = { 2 msg1: "hello1", 3 msg2: "hello2" 4 }
然后我们给我们的插件函数加上参数：
1 ;(function($) { 2 var defaults = { 3 msg1: "hello1", 4 msg2: "hello2" 5 }; 6 7 $.NPScrollLoad = function(options) { 8 var opts = $.extend(defaults, options); 9 alert(opts.msg1 + opts.msg2); 10 }; 11 12 }) (jQuery);
然后就可以调用了
$.NPScrollLoad({msg1 : "你好"});
$.NPScrollLoad({msg1 : "你好", msg2 : "呵呵"});
$.NPScrollLoad({msg2 : "......"});
$.NPScrollLoad();
没有赋值的属性会使用defaults里面定义的默认值，赋值的属性则会覆盖defaults中相应的属性。
下面是我写的插件代码，代码有些地方比较拙劣，懒得设计和修改了。。。
1 /** 2 * 无限滚动 3 * 作者：Null Pointer 4 */ 5 ;(function($) { 6 $.NPScrollLoad = function(options) { 7 // var opts = $.extend($.NPScrollLoad.defaults, options); 8 $.NPScrollLoad.defaults = $.extend($.NPScrollLoad.defaults, options); 9 return $(window).scroll(function() { 10 processor.process(); 11 }); 12 }; 13 14 var processor = { 15 timeoutId: null, 16 process: function () { 17 clearTimeout(this.timeoutId); 18 this.timeoutId = setTimeout(function () { 19 loadData(); 20 }, 400); 21 } 22 }; 23 24 /** 25 * 加载数据 26 */ 27 function loadData() { 28 if (($(document).height() - ($(document).scrollTop() + $(document.documentElement).scrollTop() + $(window).height())) <= $.NPScrollLoad.defaults.offsetPixelToLoad) { 29 $(window).unbind("scroll"); 30 $.NPScrollLoad.preLoad(); 31 $.post( 32 $.NPScrollLoad.defaults.url, 33 { pageIndex : $.NPScrollLoad.defaults.pageIndex }, 34 function (data) { 35 $.each(data, function (i, item) { 36 $.NPScrollLoad.handleResult(item); 37 }); 38 $.NPScrollLoad.afterLoad(); 39 $.NPScrollLoad.defaults.pageIndex++; 40 if (data.length < $.NPScrollLoad.defaults.pageSize) { 41 $.NPScrollLoad.noMoreData(); 42 } else if ($.NPScrollLoad.defaults.pageIndex == $.NPScrollLoad.defaults.maxPage) { 43 $.NPScrollLoad.reachMaxPage(); 44 } else { 45 $(window).bind("scroll", processor.process) 46 } 47 } 48 ); 49 } 50 }; 51 52 53 /** 54 * 处理 55 */ 56 $.NPScrollLoad.handleResult = function(jsonItem) { 57 58 }; 59 60 /** 61 * 加载之前 62 */ 63 $.NPScrollLoad.preLoad = function() { 64 $("#loading").fadeIn(); 65 }; 66 67 /** 68 * 加载之后 69 */ 70 $.NPScrollLoad.afterLoad = function() { 71 $("#loading").fadeOut(); 72 }; 73 74 /** 75 * 无更多数据 76 */ 77 $.NPScrollLoad.noMoreData = function() { 78 $("#nomoreresult").fadeIn(); 79 }; 80 81 /** 82 * 到达最大页数 83 */ 84 $.NPScrollLoad.reachMaxPage = function() { 85 $("#loadmore").show(); 86 }; 87 88 $.NPScrollLoad.defaults = { 89 /* 距离底部距离(开始加载数据) */ 90 offsetPixelToLoad : 100, 91 url : "", 92 pageSize : 10, 93 maxPage : 5, 94 pageIndex : 1 95 }; 96 97 })(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都会触发事件，所以加个延迟时间，让其一定时间内如果触发的话就取消前一次事件。代码应该不难理解。
下面是调用代码：
1 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script> 2 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.NPScrollLoad.1.0.js"></script> 3 <script type="text/javascript"> 4 $(function() { 5 var contextPath = "${pageContext.request.contextPath}"; 6 $.NPScrollLoad({url:contextPath + "/ajaxPage/home"}); 7 }); 8 </script>
本来还想排版，这么晚了，算了，睡觉了。
