An alternative perspective on JQuery dynamically expanding objects_jquery

For example: There is an employee object,

Copy code The code is as follows:

function employee(){
this.e_id = 0;
this.e_name = "";
}

Now you need to dynamically add the "age" attribute and "toString()" to it Method,

Copy code The code is as follows:

var empObj = new employee();
empObj["age"] = 20;
empObj["toString"] = function() { return this.e_id.toString() this.e_name; };

A simple line The code takes on this work, which is supported by Javascript built-in, but often we need to support a certain degree of expansion on this basis, so we will extract this simple line of code into a method:

Copy code The code is as follows:

function dym_setprop(obj, key, value) {
if (obj && key) {
obj[key] = value;
}
}

Seeing this, let’s first make a jump in our thinking and jump to the employee object in C#, as follows:

In object-oriented programming, all properties (Get/Set) are used externally, so think about how to check this method into Javascript. Now let us jump back to the dym_setprop function , that is, the direct assignment method of obj[key]=value cannot be used in the dym_setprop method, but Set must be supported.

Copy code The code is as follows:

function dym_setprop(obj, key, value, fn) {
if (obj && key) {
fn(obj, key, value);
}
}

　 Parameter fn, no object is directly manipulated in dym_setprop , using function fn to replace the corresponding operation code, in addition to supporting Set, there is also a lot of free space.
Let us continue to delve into the dym_setprop method. Now we focus on the parameter value. Everyone knows that value can be a value type or a function. For value types, you can just assign the value directly without considering other things. , it is not that simple for functions. It supports two operations:

1. Directly assign the function to the newly extended attribute

2. Assign the return value of the function execution to the new Extended attributes

Copy code The code is as follows:

function dym_setprop(obj, key, value, fn, exec, pass) {
if (obj && key) {
var temp = value;
if (exec) {
temp = value.call(obj, key, fn(obj, key));
}
fn(obj, key, temp, pass);
}
}

In this code, the parameter exec acts as the above two The role selected by this operation, the parameter pass is an additional execution parameter. In addition, you may have some doubts about fn, because it is used in two places above. The only difference is the number of parameters. What does fn stand for? ! Think about the properties in C# again. It has Get/Set, so here fn(obj,key) is equivalent to Get, and fn(obj,key,temp,pass) is equivalent to Set.

For example: look at the following code, for the definition and use of fn,

Copy the code The code is as follows:

employee.AccessProp = function(obj, key, value) {
if (value) {
obj[key] = value;
}
else {
return obj[key];
}
}

dym_setprop(empObj, "age", function(key, value) { return value 10; }, employee.AccessProp, true);

After reading so much, you may feel depressed. Why should a simple dynamically expanded object program be written in this way? It feels like you are looking for trouble. In fact, it is not the case. If you only want to do dynamically expanded objects, then I suggest You should not adopt the above dym_setprop idea, but if you want to think from a more abstract perspective and use the program in dym_setprop as a template for process execution, then this is a good way, because dym_setprop does not bear any specific code internally (obj The execution of [key]=value or obj[key]) is replaced by function fn, so that there is complete freedom for specific execution.

After understanding the above ideas, let us get to the core of this article. How does JQuery implement dynamic expansion of objects? access function,

Copy code The code is as follows:

function access(elems, key, value, exec, fn, pass ) {
var length = elems.length;

// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
}
return elems;
}
// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values ​​get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);

for ( var i = 0; i fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}
return elems;
}
// Getting an attribute
return length ? fn( elems[0], key ) : null;
}

After carefully reading the code of the access function, you must find that it is very similar to dym_setprop. It just has an extra piece of code:

Copy code The code is as follows:

if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
}
return elems;
}

It is easy to see that it is actually used to support object Dynamically extended properties of objects. The specific execution process is shown in the figure below:

I have finished writing it here. This article tries to guess from my own perspective how the JQuery developers designed the access function and let it support it. Dynamically expands the object and explains the access execution process. In fact, my guess may not be correct, but it does not hinder my research on JQuery.