Jquery plug-in development and extend

The following information is a http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/ after reading an article on IBM (using jQuery (intermediate), Part 1: creating your own plug-in? Ca = drs-tp4608 after some of your own thoughts.

This article focuses on how to write a plug-in, and mainly uses jQuery in the middle. in fn, we define a closure function, pass jQuery as a parameter, and add our own function in fn. There are several problems in the process. The record is as follows:

1. Why can I call jquery objects by adding a function to fn?

After reading the code, I noticed this sentence (jQuery. fn = jQuery. prototype), this sentence is actually very clear, jQuery. fn is actually jQuery. prototype: Use a prototype to add a function. The append function on fn uses this, which is actually a jQuery object. Because fn is prototype, the caller is an instantiated object of jQuery in jQuery implementation.

 

I have read the specific code about plug-in development in the following article. The main points are as follows. Copy as follows:

1. Private the internal method. This is actually in the plug-in you write, because this function may be called by your own plug-in. This is also to avoid code pollution. There are many examples in jquery.

2. Make the default value overwrite, which means there may be some default values in the program. Therefore, you need to pass something in the parameter that can overwrite the default parameter. For example, the option parameter is often passed in the parameter to overwrite the default parameter.

 

There are also several plug-in development rules, which are copied as follows:

1. Name the file"jquery.<your plug-in name>.js", That's nothing to say.

2. All new methods are appended to the jQuery. fn object, and all new functions are appended to the jQuery object. This is actually to add a function to the object. The plug-in is written like jQuery. fn. plugin = function (options.

3,"thisIs used to reference jQuery objects. If this rule is followed, this must be referenced by jQuery.

4. All methods/functions defined in the plug-in must end with a semicolon (;); otherwise, it will not help minimize the code. This is not clear.

5. Unless otherwise specified, all methods must return the jQuery object. In fact, this is returned. This is mainly for chained programming, which is everywhere in jQuery.

6. Always use "jQuery" instead of "$" in the plug-in code ". This is not mandatory. For example, the closure I wrote can be written in this format: (function ($) (jQuery), and then use $ in it, $ here is actually jQuery, which is something about parameter transfer.

 

Finally, the extend function is frequently used. After a simple look, the entire function is very simple, it is a replication process, but it is often used in jQuery. For example, ajax is brought to jquery through extend.

There is a problem here. We use ajax to access it in the form of $. ajax. This shows that ajax is not actually a method of jquery objects, but a static method at most. This actually indicates that extend appends information to an object, while $. ajax is used to add $ to this class object instead of jqury instance object, so it cannot be used like $ (). after ajax access, the latter returns an undefined message. Inside the method, it is actually a question of this reference.

Or paste jquery's own code and add comments to it.

 

Js Code

1. JQuery. extend = jQuery. fn. extend = function (){
2. // Target is the object for which the replication target is. Here, the first parameter is used.
3. // I indicates the starting coordinate of source. 0 is occupied by target, so the source is the next destination
4. // Length, the length of the current parameter; deep, whether it is deep copy, deep copy is to serialize the objects in it again, iterative call
5. Var target = arguments [0] | |{}, I = 1, length = arguments. length, deep = false, options;
7. // When the first function is boolean, that is, the first function can control whether to perform in-depth copy. In this case, the following parameter is shifted.
8. // This is often the case in jquery in many cases. If there is a missing parameter in the parameter list, you do not need to use null to placeholder, but directly move the following parameters to the front, in this way, there is a problem of processing parameter shifting.
9. // In this example, the first parameter is placeholder, so the target is 1 bit, and the source goes back with + 1.
10. If (typeof target = "boolean "){
11. Deep = target;
12. Target = arguments [1] || {};
13. // Skip the boolean and the target
14. I = 2;
15. }
17. // The object is not processed, and it is not a function. In this case, the actual target may be another object, such as a string or basic type. Then, the target is changed. in fact, the original information of target is ignored. it can be understood as a replacement of target with source.
18. If (typeof target! = "Object "&&! JQuery. isFunction (target ))
19. Target = {};
21. // If length = I, there is actually no source, then the target will be changed to source, and the original target will be replaced by the caller this directly. in this case, it is actually adding something directly to the caller.
22. // Use $. ajax is the most suitable. jQuery in source code. extend ({ajax: function ()}); is actually adding a function directly to $, because the caller is jQuery
23. If (length = I ){
24. Target = this;
25. -- I;
26. }
27. // Perform a loop to copy the source (there may be many sources in order), that is, you can write $. extend (target, source1, source2) like this );
28. // The subsequent information can overwrite the previous information, while source1 can be a default information built in the function, and source2 can change the information.
29. For (; I <length; I ++)
30. // Only deal with non-null/undefined values
31. If (options = arguments [I])! = Null)
32. // Extend the base object
33. For (var name in options ){
34. // Here we get information from both sides. src indicates the information obtained from the target (this may be null, or of course not, if not, the subsequent copy may overwrite this value)
35. // Copy is the information obtained from the source.
36. Var src = target [name], copy = options [name];
38. // Prevent never-ending loop
39. // This is mainly used to prevent infinite iteration in the case of deep copy. for example, extend (true, target, {"a": target}). In this case, infinite copy will occur.
40. If (target = copy)
41. Continue;
43. /// Here we are processing deep copy. If necessary, we will perform deep copy and add the value after copy to the target.
44. If (deep & copy & typeof copy = "object "&&! Copy. nodeType)
45. Target [name] = jQuery. extend (deep,
46. // Never move original objects, clone them
47. Src | (copy. length! = Null? []: {})
48. , Copy );
50. // Without the undefined Value
51. Else if (copy! = Undefined)
52. Target [name] = copy;
54. }
56. // Return target
57. Return target;
58. };

The translation is based on your own understanding, and may not be correct.

After reading this, I feel that there are many similar settings in other programs (I am doing a lot of java and java), and similar iteration processing is required, what is more intuitive is the processing of converting java objects to json in java. They all need to convert an object to json into a string, and they still need to process various types of information and avoid infinite iteration.

 

The above is a small part of the overall jquery information. Better understanding than forgetting later.