jquery Plugin Development and extend

The following information was viewed in an article on IBM (using JQuery (Intermediate), part 2nd: Creating your own plugin) http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/?ca= drs-tp4608, after some thoughts of himself.

This article is mainly from how to write a plug-in, the middle is mainly used in the Jquery.fn, by defining a closure function, the jquery as a parameter passed, and then in this FN add their own functions to achieve. There are several questions in the middle, which are recorded as follows:

1, why do I add a function to the FN to make the jquery object call?

Read the code, notice this sentence (Jquery.fn = jquery.prototype), this sentence actually very clear, Jquery.fn is actually jquery.prototype, through the prototype to implement a function of the addition. Using this on the function appended to FN, this is actually a jquery object. Because FN is prototype, the caller of the function is the jquery implementation is an instantiated object of jquery.

Read the next article on the plug-in development, the specific code is the second, mainly in which there are several important points. Copy the following:

1, let the internal method of privatization, this is actually said in their own plug-in, because this function may be called on their own plug-in, which is in fact to avoid code pollution. There are a lot of examples in jquery.

2, let the default values be overwritten, which means that there may be some default values in the program. So it is necessary to pass some things that can override the default parameters in the pass parameter, such as the parameter that often passes the options, which is actually to override the default parameters.

There are several plug-in development rules that are copied as follows:

1, the file is named " jquery.<your plug-in name>.js ", this is nothing to say.

2, all new methods are attached to the Jquery.fn object, and all new features are appended to the JQuery object, which is actually adding functions to the object. The plug-in notation is the jquery.fn.plugin=function (options) look.

3, " this " is used to refer to the JQuery object. If you follow the rules, this is definitely quoted in jquery.

4, the end of all methods/functions defined in the plugin must have a ";" (semicolon), otherwise it will be detrimental to the minimization of the code. That's not clear.

5, except for the special note, all methods must return the JQuery object, in fact, return this. This is mainly for chained programming, which is everywhere in jquery.

6, always use "jQuery" instead of "$" in the plugin code. This is not mandatory, for example, I write the closure can write: (function ($)) (jQuery) This format, and then use $ in it, where the $ is actually jQuery, this is the argument passed on the thing.

The last is the extend function that is often used inside. As a simple look, the whole function is simple, it's a copy process, but it's often used in jquery, such as Ajax, through extend to jquery.

There is a problem in that we use Ajax to access this form of $.ajax, which means that Ajax is not really a method of jquery objects, most of which is a static method. This actually means that extend is appending information to an object, and $.ajax is adding to the class object, not Jqury the instance object station, so it cannot be accessed in the form of a $ () Ajax, which returns a undefined message. Inside the method, there is actually a problem with this reference.

Or put jquery's own code on it, and annotate it with information.

JS Code

2. Jquery.extend = JQuery.fn.extend = function () {
4. //target is the object to which the copy is intended, and here is the first parameter.
6. the//i represents the starting coordinates of the source. 0 is occupied by target, so the source is the destination of the next
8. //length, the current parameter length, deep, whether deep copy, depth copy is to serialize the object inside again, make iterative call
10. var target = arguments[0] | |  {}, I = 1, length = arguments.length, deep = false, options;
14. //handling the first function is a Boolean case, that is, the first function can control whether deep copy, then the next parameter is shifted backwards.
16. //jquery In many places is this processing situation, often the parameter list has a parameter missing, then do not need to use NULL to occupy the position, but directly to the back of the argument to the front, so there is a handling parameter shift problem.
18. //In this case, the first parameter is occupied, then target is 1 bits, and the source goes back +1.
20. if ( typeof target = = = "boolean") {
22. Deep = target;
24. target = Arguments[1] | | {};
26. //Skip the Boolean and the target
28. i = 2;
30. }
34. //Handling This is not object and is not a function, so the actual target may be something else, such as a string or basic type, The target is then changed. In effect, the original information of target is ignored. It can be understood as a source instead of target.
36. if ( typeof target!== "Object" &&!jquery.isfunction (target))
38. target = {};
42. //If the length==i, in fact, does not have source, then the target becomes source, the original target is directly replaced by the caller this. In this case, it is to add something directly to the caller.
44. //This is used $.ajax to understand, the most suitable. In the source code jquery.extend ({ajax:function ()}), in the form of, in fact, directly to the $ add function, because the caller is jquery
46. if (length = = i) {
48. target = this ;
50. I.;
52. }
54. //loop, the source (there may be a lot of source, in order to copy), that is to say $.extend (TARGET,SOURCE1,SOURCE2);
56. //So the information behind can overwrite the previous information, and Source1 can be a default information built into the function, Source2 can change the information.
58. For (; i < length; i++)
60. //Only deal with non-null/undefined values
62. if (options = arguments[i]! = null)
64. //Extend the Base Object
66. For ( var name in options) {
68. //Here The information is taken on both sides, SRC indicates the information taken from Target (this may be null, or it may not, if not, then copy may overwrite this value)
70. //copy is the information that is taken from source.
72. var src = target[name], copy = options[name];
76. //Prevent never-ending loop
78. //This is primarily to prevent the case of infinite iterations in case of deep copy. For example: Extend (true,target,{"a": Target}), in which case an infinite copy will appear .
80. if (target = = = copy)
82. continue;
86. //////This is the process of depth copy, and if necessary, deep copy, add the copy value to target
88. if (deep && copy && typeof copy = = = "Object" &&!copy.nodetype)
90. target[name] = Jquery.extend (Deep,
92. //Never move original objects, clone them
94. src | | (copy.length ! = null?) [ ] : { } )  
96. , copy);
100. //Do not add undefined value
102. Else if (copy!== undefined)
104. target[name] = copy;
108. }
112. //return target
114. return target;
116. };

Translations are translated according to their own understanding, and may not be correct.

Looking at this thing, feel in other programs (I do java,java many of this) also have a lot of similar settings, need to do similar iterative processing, the more intuitive is Java object to JSON processing, all the same to an object JSON into a string, The middle still has to deal with various types of information, but also to avoid infinite iterations and so on.

The

     above is a small part of the big message throughout jquery. It's better to know something than to forget it later.