《jQuery插件编写学习实例——无限滚动.docVIP

　　最近自己在搞一个网站，需要用到无限滚动分页，想想工作两年有余了，竟然都没有写过插件，实在惭愧，于是简单学习了下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中相应的属性。 ? 下面是我写