jq 插件写法

1.一次声明一个函数

$.fn.函数名 = function([options]){}

$.fn.red=function(options){
var defaults = {
'color': 'red'
};
var settings = $.extend(defaults, options);
this.css(settings);

return this;

}

2.一次声明多个函数   

$.fn.extend({
函数名:function(){}
});

$.fn.extend({
big:function(options){
var defaults = {
'fontSize': '22px'
};
var settings = $.extend({},defaults, options);

this.css(settings);

return this;

},
normal:function(options){
var defaults = {
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);

this.css(settings);

return this;

}
});

3.通常是结合命名空间搭配使用，将需要用到的功能块整合进来，然后确定好输入与输出，同时保证传入参数的可扩展性（有默认值，复合对象），和传出的链式调用（return this）；

4. 扩展

4.1

面向对象思维编辑插件

//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
})

4.2

jquery extend实现原理