Jquery source code-jquery. Extend

ArticleDirectory

• Example 1: Expand jquery itself
• Example 2: Extended object
• Example 3: shallow copy-references exist in OBJ
• Example 4: Deep copy-references exist in OBJ
• Example 5: Expand jquery. FN

From the jquery source code, we can see that jquery. Extend and jquery. FN. Extend are actually different references pointing to the same method.

 
Jquery. Extend = jquery. FN. Extend =Function(){
 

Aimed at itsCodeIt is not complex, but plays an extremely important role in jquery.

Jquery. ExtendExtends the attributes and methods of jquery.

Jquery. FN. ExtendExtended the attributes and methods of jquery. fn.

 //  Extends the jquery object. The jquery. noconflict method is added here.  Jquery. Extend ({noconflict:  Function (Deep ){  //  Implementation Details  },  //  ..  })  //  Extended jquery. FN. Add the jquery. FN. Data method here.  Jquery. FN. Extend ({data:  Function  (Key, value ){  //  Implementation Details  },  // ... })

 

Extend usage

The following provides examples to illustrate the common use of extend. At last, we will briefly introduce some internal implementation details of the extend method.

Example 1: Expand jquery itself

The Code is as follows:

 
Jquery. Extend ({NICK: 'casper '});
 

Print down

 
Console. Log (jquery. Nick );//Output: 'casper'
 

 

Example 2: Extended object

The Code is as follows. Copy the properties/methods of obj2 to obj1. note the following two points:

1. Obj1 itself will be modified
2. The modified obj1

 
VaRObj1 = {NICK: 'casper'}, Obj2= {NICK: 'chingp', age: 25};VaRObj3 = jquery. Extend (obj1, obj2 );
 

Print down

Console. Log (JSON. stringify (obj1 ));//Output {"Nick": "chyingp", "Age": 25}Console. Log (JSON. stringify (obj3 ));//Output {"Nick": "chyingp", "Age": 25}
 

 

Example 3: shallow copy-references exist in OBJ

The following code indicates that the value of obj1.scores is a reference to an object. When an application with the same name exists in obj2, the reference with the same name in obj2 will overwrite the one in obj1.

 
VaRObj1 = {NICK: 'casper ', scores: {Math: 100, English: 100}}, Obj2= {Scores :{ hitory: 100}}, Obj3= Jquery. Extend (obj1, obj2 );
 

Print down

 
Console. Log (JSON. stringify (obj1 ));//Output {"Nick": "Casper", "scores": {"hitory": 100 }}
 

 

Example 4: Deep copy-references exist in OBJ

Or the code of instance 3. The difference is that the first parameter is changed to true, indicating that this is a deep copy.

 
VaRObj1 = {NICK: 'casper ', scores: {Math: 100, English: 100}}, Obj2= {Scores :{ hitory: 100}}, Obj3= Jquery. Extend (True, Obj1, obj2 );
 

Print down

 
Console. Log (JSON. stringify (obj1 ));//Output {"Nick": "Casper", "scores": {"math": 100, "English": 100, "hitory": 100 }}
 

 

Example 5: Expand jquery. FN

The following code adds the say method to jquery. fn ~

Jquery. FN. Extend ({say:Function() {Console. Log ("Hello, I'm" +This. ATTR ('id'));}});
 

Print down

 
$ ('# Casper'). Say ();//Output hello, I'm Casper
 

 

Implementation Details of extend

Directly Add code

Jquery. Extend = jquery. FN. Extend = Function  (){  VaR  SRC, copyisarray, copy, name, options, clone, Target = Arguments [0] | | {}, // Common usage: jquery. Extend (obj1, obj2). In this case, target is arguments [0]. I = 1 , Length = Arguments. length, deep = False  ;  //  Handle a deep copy situation      If ( Typeof Target = "Boolean "){ //  If the first parameter is true, that is, jquery. Extend (true, obj1, obj2 ); Deep = target; // In this case, the target is true. Target = arguments [1] || {}; //  Change target to obj1          //  Skip the Boolean and the target I = 2 ;}  //  Handle case when target is a string or something (possible in deep copy)      If ( Typeof Target! = "Object "&&! Jquery. isfunction (target )){ // Handle strange situations, such as jquery. Extend ('hello', {NICK: 'casper })~~ Target = {};}  //  Extend jquery itself if only one argument is passed      If (Length = I ){ //  Handle this situation: jquery. Extend (OBJ), or jquery. FN. Extend (OBJ) Target = This ; //  For jquery. Extend, this indicates jquery; For jquery. FN. Extend, this indicates jquery. fn. -- I ;} For (; I <length; I ++ ){  //  Only deal with non-null/undefined values          If (Options = arguments [I])! = Null ){ //  For example, jquery. Extend (obj1, obj2, obj3, ojb4) and options are obj2, obj3...              //  Extend the Base Object              For (Name In  Options) {SRC =Target [name]; copy = Options [name];  //  Prevent never-ending loop                  If (Target = copy ){ //  Prevents self-reference. Do not repeat it                      Continue  ;}  //  Recurse if we're re merging plain objects or Arrays                  //  If it is a deep copy, and the copied property value itself is an object                 If (Deep & Copy & (jquery. isplainobject (copy) | (copyisarray = Jquery. isarray (copy )))){  If (Copyisarray ){ //  The copied property value is an array. Copyisarray = False  ; Clone = SRC & jquery. isarray (SRC )? SRC: [];}  Else {The copied property value is a plainobject, for example, {NICK: 'casper' } Clone = SRC & jquery. isplainobject (SRC )? SRC :{};}  //  Never move original objects, clone them Target [name] = jquery. Extend (deep, clone, copy ); //  Recursion ~                  //  Don't bring in undefined values } Else   If (Copy! = Undefined ){ //  Shortest copy, and the attribute value is not undefined Target [name] =Copy ;}}}}  //  Return the modified object      Return  Target ;}; 

 

Conclusion

Jquery. extend/jquery. FN. the extend method is very simple, but it plays an important role in the overall design of jquery. extend (OBJ), jquery. FN. extend (OBJ) is for jquery itself, jquery. FN extension will be very helpful for subsequent source code analysis. In addition, no more ~~