$.extend (), with $.fn.extend () explained

$.extend (), with $.fn.extend () (i) (2013-07-11 10:24:31) reproduced transferred from: http://blog.sina.com.cn/s/blog_a3bd3bd0010187y1.html

There are two types of jquery plugin development:

One is the development of a class-level plug-in that adds a new global function to jquery, which is equivalent to adding a method to the jquery class itself. The global function of jquery is a function that belongs to the jquery namespace, and the other is the object-level plug-in development that adds a method to the jquery object. The following is a detailed description of the development of the two functions.

1 , class-level plug-in development

The most straightforward understanding of plug-in development at the class level is to add a class method to the jquery class, which can be understood as adding a static method. The typical example is $. The AJAX () function, which defines the function in the jquery namespace. Plug-in development at the class level can be extended in the following ways:

1.1 Add a new global function

To add a global function, we just need to define the following:

Java code

1. Jquery.foo = function () {
2. Alert (' This is a test. This was only a test. ');
3. };

1.2 add multiple global functions

Add multiple global functions, which can be defined as follows:

Java code

1. Jquery.foo = function () {
2. Alert (' This is a test. This was only a test. ');
3. };
4. Jquery.bar = function (param) {
5. Alert (' This function takes a parameter, which is "' + param + '".);
6. };
7. Called when it is the same as a function: Jquery.foo (); Jquery.bar (); or $.foo (); $.bar (' Bar ');

1.3 Use Jquery.extend (object);　

Java code

1. Jquery.extend ({
2. Foo:function () {
3. Alert (' This is a test. This was only a test. ');
4. },
5. Bar:function (param) {
6. Alert (' This function takes a parameter, which is "' + param + '".);
7. }
8. });

1.4 using Namespaces

Although in the jquery namespace, we prohibit the use of a large number of JavaScript function names and variable names. However, it is still inevitable that some functions or variable names will conflict with other jquery plugins, so we are accustomed to encapsulating some methods into another custom namespace.

Java code

1. Jquery.myplugin = {
2. Foo:function () {
3. Alert (' This is a test. This was only a test. ');
4. },
5. Bar:function (param) {
6. Alert (' This function takes a parameter, which is "' + param + '".);
7. }
8. };
9. The function that takes the namespace is still the global function, the method that is used when calling:
10. $.myplugin.foo ();
11. $.myplugin.bar (' Baz ');

With this technique (using a separate plug-in name), we can avoid collisions of functions within namespaces.

2 , Object-level plug-in development

Plug-in development at the object level requires two forms:,

Form 1:

Java code

1. (function ($) {
2. $.fn.extend ({
3. Pluginname:function (Opt,callback) {
4. Our plugin implementation code goes here.
5. }
6. })
7. }) (JQuery);

Form 2:

Java code

1. (function ($) {
2. $.fn.pluginname = function () {
3. Our plugin implementation code goes here.
4. };
5. }) (JQuery);

The above defines a jquery function, the parameter is $, and after the function definition is complete, the jquery argument is passed in. Call execution immediately. The advantage of this is that when we write a jquery plugin, we can also use this alias, without causing a conflict with prototype.

2.1 in the JQuery name space under the declaration of a name

This is a single plug-in script. If your script contains multiple plugins, or reciprocal plugins (for example: $.fn.dosomething () and $.fn.undosomething ()), then you need to declare multiple function names. However, usually when we write a plugin, we try to use only one name to contain all of its contents. Our example plug-in is named "Highlight"

Java code

1. $.fn.hilight = function () {
2. Our plugin implementation code goes here.
3. };
4. Our plug-in is called by this way:
5. $ (' #myDiv '). Hilight ();

But what if we need to decompose our implementation code into multiple functions? There are a number of reasons: design needs, easier or more readable implementations, and more in line with object-oriented. This is a real hassle, breaking down the functionality into multiple functions without adding extra namespaces. For the sake of recognizing and using functions as the most basic class object in JavaScript, we can do this. Just like any other object, a function can be specified as a property. So we have declared that "hilight" is a Property object of jquery, and any other property or function that we need to expose can be declared in the "hilight" function. Continue later.
2.2 Accept Options parameters to control the behavior of the plug- in

Let's add features to our plug-in to specify the foreground and background colors. We might let the option pass to the plug-in function like an options object. For example:

Java code

2. Plugin definition
4. $.fn.hilight = function (options) {
6. var defaults = {
8. Foreground: ' Red ',
10. Background: ' Yellow '
12. };
14. Extend Our default options with those provided.
16. var opts = $.extend (defaults, options);
18. Our plugin implementation code goes here.
20. };
22. Our plug-in can be called this way:
24. $ (' #myDiv '). Hilight ({
26. Foreground: ' Blue '
28. });

2.3 exposing the default settings for plug-ins

One of the improvements we should take with the above code is to expose the plugin's default settings. This makes it easier for plug-in users to overwrite and modify plugins with less code. Next we start using the function object.

$.extend (), with $.fn.extend () explained