Extended functions extended by jquery source code analysis: extend, $. Extend

Source: Internet
Author: User
Statement: This article is an original article by the author, all of which have been analyzed by the author one by one. I hope you can give me some advice if there is something wrong with it.

You are welcome to reprint it. Please indicate the source for reprinting.

Address: http://imsiren.com/archives/525

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
Extend Functions

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.
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?

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.

At this time, the returned RET value is 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.

o.extend = o.fn.extend = function() {        var J = arguments[0] || {},        H = 1,        I = arguments.length,        E = false,        G;        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) {                        continue                    }                    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.
Otherwise
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.

(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 ??

^. ^

Source: http://imsiren.com/archives/525

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.