点进来的同学一定都用过jQuery，它提供了很多实用、简单、便捷的方法。jQuery虽然好用，但有时候需要定制自己所需要的功能时候，应该去怎么扩展jQuery呢，今天作者就带大家一起总结一下jQuery插件编写方法。

扩展jQuery有两种不同的方式：

1. 扩展jQuery对象的方法，使用 $.fn.extend
2. 扩展jQuery本身的方法，使用 $.extend

扩展jQuery对象的方法

jQuery对象的方法就是使用选择器选中元素后可以使用的方法，比如click方法。使用 $.extend 可以扩展对象方法。
jQuery扩展大多数属于此类型。

例子：改变元素背景颜色的扩展方法

$.fn.extend({
    setBackColor: function(color){
        return this.css('background-color', color || '#ffffff');
    },
});

说明：

1. $.fn.extend 传入一个对象，每个键值对即为扩充的方法名和方法体, 这意味着你可以一次扩展多个方法；
2. 扩展方法内，如setBackColor 中，this为包裹当前元素的jQuery对象；
3. 扩展方法应该返回 this，以便可以提供链式操作。

使用方法：
这类插件使用和使用jQuery内置的对象方法一样，先选择元素再调用扩展方法：

$('h1').setBackColor('#ff0000');

这会将h1元素的背景颜色修改为红色。

扩展jQuery本身的方法

jQuery本身的方法指的是jquery的全局方法（静态方法），不需要选择元素就可以使用，比如 $.ajax 方法。

例子：jquery弹窗扩展

$.extend({
    alert: function(text){
        return alert(text);
    },
    confirm: function(text){
        return confirm(text);
    },
});

说明：

1. $.extend 传入一个对象，每个键值对即为扩充的方法名和方法体, 这意味着你可以一次扩展多个方法；
2. 扩展方法内，this 为jQuery函数本身；
3. 不需要返回this，根据需要返回所需要的内容。

使用方法：
这类插件使用和就和使用其他jQuery全局方法一样：

$.alert('jquery alert ok!');
$.confirm('jquery confirm ok!');

插件编写经验

使用 $.extend 设置默认参数

$.extend 还有一种使用方法，当给 $.extend 传递多个参数时候，例如：

var options = $.extend({
    width: 150,
    height: 100,
}, options);

后面参数相同中的值会依次覆盖掉前面的参数值。$.extend的详细说明： 戳这里查看

所以在编写插件时，需要传入一些参数，可以这样写：

$.fn.extend({
    setSize: function(options){
        options = $.extend({
            width: '100px',
            height: '100px',
        }, options);
        this.css('width', options.width);
        this.css('height', options.height);
        return this;
    },
});

这个例子扩展了一个修改元素尺寸的方法，需要传入两个参数width和height，使用上面的这种方法。不仅不需要记住参数顺序，而且可以设置默认参数，

将代码放在匿名函数中

将插件所有的相关代码放在一个匿名函数中，可以防止污染全局命名空间。

例子：改写上面的修改元素尺寸插件

/**
 * jquery修改元素尺寸插件
 * @author  luoluolzb
 * @version 1.0
 * @datetime 2019/5/2
 */
;(function($){
    function setSize(options){
        options = $.extend({
            width: '100px',
            height: '100px',
        }, options);
        this.css('width', options.width);
        this.css('height', options.height);
        return this;
    };

    $.fn.extend({
        'setSize': setSize,
    });
})(jQuery);

说明：

1. 首行分号为了防止引入的其他库的代码末尾没有分号导致的问题；
2. 可以在匿名函数中定义一些辅助函数和变量给插件函数使用，这样外部无法访问，也不会导致名称冲突。

插件文件命名方法

一般应该将插件放在一个单独js文件中，命名方法可以使用：jquery.pluginName.js

例如，上面的修改元素尺寸插件应该命名为：jquery.setSize.js，压缩后：jquery.setSize.min.js

作者写的一些jQuery插件

图片轮播插件：jquery-lqImgCarousel

项目地址：https://github.com/luoluolzb/jquery-plugin/tree/master/jquery-lqImgCarousel

图片滚动插件：jquery-lqImgSlider

项目地址：https://github.com/luoluolzb/jquery-plugin/tree/master/jquery-lqImgSlider

文件上传插件：jquery-lqUploader

项目地址：https://github.com/luoluolzb/jquery-plugin/tree/master/lqUploader