Extend, $. extend source code analysis in jquery

Source: Internet
Author: User

This article will introduce the source code analysis of extend and $. extend in jquery, and hope to help you.

I haven't written jquery source code for a long time ..
There is a major factor in jquery's development because it is very easy to expand, and the reason is that it is benefited from the extend function.
This function is an extension function... It is an extension function, but it is actually a function of shortest copy and deep copy.
This function is really powerful and elegant to write ..
Let's take a look at the usage in three ways.

The Code is as follows: Copy code
1. $. extend (dest, src1, src2, src3 ...);
2. $. extend (src)
3. $. extend (boolean, dest, src1, src2, src3 ...)

This means to merge src1, src2, and src3 into the dest object ..
Specifically, the third parameter indicates whether to perform deep copy on src1 and src2.
So what is deep copy?

The Code is as follows: Copy code
Var ret = $. extend (true ,{},
{Name: "siren", about: {age: 24, country: "beijing "}},
{From: "hebei", birthday: {year: 1988, month: 02 }}

If the first value is true, perform deep copy on src1 and src2.
In this case, the returned ret value is

The Code is as follows: Copy code
Ret = {name: "siren", about: {age: 24, country: "beijing"}, from: "hebei", birthday: {year: 1988, month: 02 }};

We found that the attributes of even about and birthday are copied to dest. This is deep copy.
Let's look at the source code.

The Code is as follows: Copy code

O. extend = o. fn. extend = function (){
Var J = arguments [0] || {},
H = 1,
I = arguments. length,
E = false,
If (typeof J = "boolean "){
E = J;
J = arguments [1] || {};
H = 2
If (typeof J! = "Object "&&! O. isFunction (J )){
J = {}
If (I = H ){
J = this; -- H
For (; H <I; H ++ ){
If (G = arguments [H])! = Null ){
For (var F in G ){
Var K = J [F],
L = G [F];
If (J = L ){
If (E & L & typeof L = "object "&&! L. nodeType ){
J [F] = o. extend (E, K | (L. length! = Null? []: {}), L)
} Else {
If (L! = G ){
J [F] = L
Return J

This is the definition part of the method.
We analyze data row by row.
Row 3 gets the first parameter passed in by extend if it is not initialized as an object.
Obtain the number of parameters in four rows.
Row 7: if the first parameter is of the bool type, the usage is the third one we mentioned earlier.
Row 12-14: it is a rule. The first parameter is either bool or obj. Of course, in js, The obj type also includes functions.
Rows 18-34: Copy. Variable G is a temporary variable to save the current src value.
For example, execute $. extend ({}, {a: 10}); G equals to {a: 10}
Lines 26-27: If deep replication is performed, the src attribute is also an object and not an element object... At this time, we call o. extend for Recursive replication.
Line 29-31: L! = Where is g. g defined? Not defined, so it is equal to undefined ..
J [F] = L; F is equal to the property name.. L is equal to the value. J is equal to our dest.
How can we understand that there is no... so we can also write a very good inheritance function ..
Let me start with a simple one.

The Code is as follows: Copy code

(Function (){
Var s = {};
S. extend = function (){
Var a = arguments [0] || {},
E = false, // whether it is a deep copy
H = 0, // number of parameters
J = arguments [1],
N = arguments. length, g;
If (typeof arguments [0] === 'boolean '){
E = arguments [0];
H = 1;
For (; h <n; h ++ ){
G = arguments [h];
If (typeof g! = Null ){
For (var t in g ){
If (e & g [t] & typeof g [t] = 'object '&&! G [t]. nodeType) {// deep copy
O. extend (e, (j | |{}), g [t]);
} Else {
If (g [t]! = Undefined ){
J [t] = g [t]; // copy
Return j;
Var c = s. extend ({a: 10}, {name: 'siren', t: {age: 20, sex: 1 }})
Console. log (c)

How about... Is it very simple ??

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.