jQuery插件实现的方法和原理简单说明

下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructions.html

jQuery插件实现的方法和原理简单说明

jQuery是一个封装的很好的类，比如我们使用$("#username")会生成一个 jQuery类的实例。

1、jQuery插件开发主要使用如下两个方法：

1.1、添加静态方法

jQuery.extend(object);

为扩展jQuery类本身，为类添加新的方法，可以理解文添加静态方法。

$.extend({ 
　　addMethod : function(a, b){return a + b;}   // $.addMethod(1, 2); //return 3
});

1.2、添加成员方法

jQuery.fn.extend(object);

jQuery.fn = jQuery.prototype

给jQuery对象添加方法，对jQuery.prototype进行扩展，为jQuery类添加成员方法：

$.fn.extend({ 
    getInputText:function(){ 
        $(this).click(function(){ 
            alert($(this).val()); 
        }); 
    } 
});

$("#username").getInputText();

 

2、一个通用的框架：

以下是一个通用的框架：

(function($){ 
    $.fn.yourPluginName = function(options){ 
        //各种属性和参数 

        var options = $.extend(defaults, options); 

        this.each(function(){ 
            //插件的实现代码

        }); 
    }; 
})(jQuery);

关于

$.extend(defaults, options);

就是通过合并defaults和options来扩展defaults，实现插件默认参数的功能，详细解释可以参考jQuery的官方文档：

http://api.jquery.com/jQuery.extend/