Method $.extend (), $.fn.extend () difference and contact when using jquery to extend a plugin

methods for developing plug-ins using JQ:

1, Jquery.extend ();

2, JQuery.fn.extend ();

3 . Created by $.widget () by using the part factory method of the JQuery UI.

Because the third way is usually used to develop more advanced jquery parts, the development is more difficult, so the first and second way to use the more extensive, the following mainly on the first two ways of difference and contact and the method used to do some introduction.

A brief explanation: jquery is a very good class for encapsulation, and$ ("#btn") is equivalent to creating an instance of jquery.

1, Method Jquery.fn. Extend () = JQuery.prototype.extend (), that is, the use of the method two extension plug-in equivalent to the JQuery prototype extension, each instantiated object can directly invoke the extended method. such as:

$.fn.extend ({

Init:function () {

Write the Code yourself

}

})

after instantiating by $ ("#btn") , you can call the init method directly,$ ("#btn"). Init ().

2, but the development of plug-ins through method 1 is equivalent to the static method of jQuery extension, the method of extension needs to be called through the class , such as:$.extend ({

Init:function () {};

} )

The Init method can only be called by $.init () because it is a static method that cannot be called through an instance.

3.you can extend an object by using the $.extend () method to extend an object with one or more other objects, returning the extended object objectj query.extend (Target, Object1, [ OBJECTN])

such as: var set = {Ha:false, limit:5, Name: "foo"};

var opt = {ha:true, name: "Bar"};

Jquery.extend (set, opt);

Result:set== {ha:true, limit:5, Name: "Bar"} through the result you can know that when the next object and the previous object has the same name as the parameter in front of the parameters will be overwritten by the following parameters, no merge.

4, in order to avoid conflicts with other JS packets, while avoiding the $ symbol is rewritten, usually in the extension will define an anonymous function with the parameters of the $ to plug-in extension. (function ($) {

$.fn.tooltip = function (options) {

};

}) (JQuery);

equivalent to

(function ($) {

var tooltip = {

function (options) {

}

};

$.fn.extend (tooltip) = $.prototype.extend (tooltip) = $.fn.tooltip

}) (JQuery);

Directly defines an anonymous function and invokes the parameter jquery at the same time, so that in later use, $ represents jquery.

Method $.extend (), $.fn.extend () difference and contact when using jquery to extend a plugin