无意看了这篇《jQuery插件开发精品教程，让你的jQuery提升一个台阶》文章，现在做一下总结。

一、jQuery插件的创建可以有三种方法

1.通过$.extend()来扩展jQuery

2.通过$.fn 向jQuery添加新的方法

3.通过$.widget()应用jQuery UI的部件工厂方式创建

方法1太简单，创建后通过$.myfunction()方式调用，不能对指定元素调用。

方法3相对于方法2太复杂。

方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();

二、jQuery插件创建格式

$.fn.myfunction = function() {

    //在这里面,this指的是用jQuery选中的元素

    //example :$('a'),则this=$('a')

    this.css('color', 'red');

}

如果想要支持链式调用只需return一下即可。

$.fn.myfunction = function() {

    //在这里面,this指的是用jQuery选中的元素

    //example :$('a'),则this=$('a')

    return this.css('color', 'red');

}

三、让插件接受参数，使用$.extend方法

$.fn.myPlugin = function(options) {

    var defaults = {//设置默认值

        'color': 'red',

        'fontSize': '12px'

    };

    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码

    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。

    return this.css({

        'color': settings.color,

        'fontSize': settings.fontSize

    });

}

四、面向对象的插件开发

为了以后代码维护和可读性我们可以进行面向对象的方法开发插件。

var Beautifier = function(ele, opt) {

    this.$element = ele,  //获取当前选中的jq对象。

    this.defaults = {

        'color': 'red',

        'fontSize': '12px'

    },

    this.options = $.extend({}, this.defaults, opt)

}

//定义Beautifier的方法

Beautifier.prototype = {

    beautify: function() {

        return this.$element.css({

            'color': this.options.color,

            'fontSize': this.options.fontSize

        });

    }

}

//在插件中使用Beautifier对象

$.fn.myPlugin = function(options) {

    //创建Beautifier的实体

    var beautifier = new Beautifier(this, options);

    //调用其方法

    return beautifier.beautify();

}