所有文章搬运自我的个人主页：
因为从来没写过jQuery插件，所以本文要通过一个轮播的例子，练习jQuery插件的写法。
新建插件文件
在讨论细节之前，先新建插件文件（当然也可以把代码直接放在页面的script标签中，只是复用麻烦些），如：'jQuery.carousel.js'。在文件中首先加入以下代码：
(function($){ //...具体的实现})(jQuery); 为什么一定要用闭包包裹一层？原因有二：
- 为插件创建私有的作用域。这样包裹以后，外面的代码不能直接访问插件内部的代码，插件内部声明的临时变量也不会污染到全局。
- 在插件内部可以无顾忌地使用'$'符号代替'jQuery'，写起代码来更简便。
写jQuery插件的两种方式
1. 扩展jQuery全局函数
相当于c#中的静态方法，可以理解为给jQuery类添加静态方法。jQuery的全局函数也就是jQuery命名空间下的函数（如$.ajax(),$.each()等），这种添加方式也就是给jQuery命名空间下添加新函数。这种函数的特征是它不直接操作dom元素，可以说是工具类函数，因此不挂载在jQuery对象上。
这种方式下的函数写法也有多种：第一种
$.myAlert=function(){ window.alert("message from XX"); }调用
$.myAlert();
第二种 (可以一次添加多个函数）
$.extend({ myAlert:function(){ window.alert("message from XX"); }, myLog:function(){ window.console.log("message from XX"); } } );调用
$.myAlert();$.myLog();
第三种
在jQuery下再添加一层命名空间，将插件函数挂载在自定义的命名空间下，可以避免和jQuery以及其他插件的变量名或函数名冲突。$.myPlugin.myAlert=function(){ window.alert("message from XX"); }调用
$.myPlugin.myAlert();
2. 扩展jQuery对象（实例）方法
给jQuery对象添加方法，也就是说，只有经过实例化的jQuery对象才可以调用我们添加的方法。
这种方式下的函数写法也有多种：
第一种
$.fn.myAlert=function(){ window.alert("message from XX"); }调用
$('.myButton').myAlert();第二种 (可以一次添加多个函数）
$.fn.extend({ myAlert:function(){ window.alert("message from XX"); } } );调用
//正确的调用 $('.myButton').myAlert(); $(this).myAlert(); $('#test li').myAlert(); //错误的调用 $.myAlert();//error
查看jQuery的源码就能知道，$.fn也就是jQuery.prototype，如果对原型有所了解就会知道，我们对它进行扩展，自然所有的jQuery类的实例都可以访问到方法了。
很多的jQuery插件都是用这种方式，这样用jQuery选择器获取到jQuery对象以后，就可以调用插件方法。
本文的轮播插件也将依照这种类型来写。写插件的标准
使用过jQuery的人都知道它有一些非常棒的特性，如选择器后的隐式迭代、链式调用。
- 隐式迭代
什么是隐式迭代？看下面这行代码，它会将整个页面上所有的p元素设成背景红色。
$('p').css('background','red');//隐式迭代 我们自己写的插件也要尽量支持这种隐式迭代，实现的方式也很简单，用each方法来遍历即可，代码如下：
$.fn.myLog=function(){ this.each(function(){//显式迭代 window.console.log(this); });} 要注意的是，插件函数体内的'this'(上段代码中的第一个'this'）即指的是当前通过选择器获取到的jQuery对象数组，而不像通常事件函数内部的'this'指的是dom元素。而代码中的第二个'this'则确实指的是一个dom元素了。
连缀语法
连缀指的是每次调用完把当前对象返回，供下次调用，这样可以一个方法接一个方法的连缀调用，中间用'.'隔开即可，除了连缀以外，我喜欢叫它链式调用更方便自己理解。下面这行代码就是连缀语法的一个例子。$('p').css('background','red').slideDown();
可以看出，为了支持这种链式调用，插件除了执行自己的逻辑以外，最后还应该把当前的jQuery对象数组返回。所以上面的代码我们可以修改如下：
$.fn.myLog=function(){ return this.each(function(){//return 当前对象 window.console.log(this); });} 设置默认参数
插件内部可以设置默认参数，让用户在不传入参数的情况下也可以调用。当用户传入自己的参数时，对于用户有设置值的属性，用户设置的值覆盖默认值，对于用户没有设置值的属性，插件内部就用属性的默认值。这个覆盖操作可以用$.extend()方法实现，$.extend()用法可以戳官方API文档→。(function($) { var defaults = { name: 'test', message: 'test message' }; $.fn.myLog = function() { return this.each(function(options) { //也可以用下面注释这句，只是这样defaults也会被改变 //var options=$.extend(defaults,options); var options = $.extend({}, defaults, options); window.console.log(options.name + ":" + options.message); }); } })(jQuery);调用：
$('.className').myLog();//使用默认值 $('.className').myLog({name:'sheilasun'});//传入参数，覆盖默认值还可以进一步改进，现在defaults在外界是无法获取的，我们可以把它暴露出来，让用户可以在使用插件之前修改默认值。
(function($) { $.fn.myLog.defaults = { name: 'test', message: 'test message' }; $.fn.myLog = function() { return this.each(function(options) { var options = $.extend({}, $.fn.myLog.defaults, options); window.console.log(options.name + ":" + options.message); }); } })(jQuery);
调用：
$.fn.myLog.defaults={name:"sheilasun.me",message:'message from sheilasun.me'};//或者$.fn.myLog.defaults.name="sheilasun.me"; 总结
- jQuery插件可以用两种方式添加，分别是针对jQuery全局函数的扩展和jQuery对象（实例）方法的扩展
- 插件要尽量返回当前对象，支持连缀写法
- 插件内部可以用$.each()方法遍历选择器获取到的所有jQuery对象，支持隐式迭代
- 插件内部可以设置默认值，或将其暴露出来，供外界修改
关于轮播的逻辑实现，放在下一篇写。