Jquery source code-jquery. Extend

Source: Internet
Author: User
    • 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 ;}; 



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 ~~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.