For example: There is an Employee object,
Copy Code code as follows:
function Employee () {
this.e_id = 0;
This.e_name = "";
}
Now you need to add the "age" attribute and the ToString () method dynamically for it.
Copy Code code as follows:
var empobj = new Employee ();
Empobj["age"] = 20;
empobj["toString" = function () {return this.e_id.toString () + this.e_name;};
A simple line of code takes this work, which is supported by JavaScript, but often we need to support a certain level of extension on this basis, so we will take this simple line of code into one way:
Copy Code code as follows:
function Dym_setprop (obj, key, value) {
if (obj && key) {
Obj[key] = value;
}
}
See here, we first let the idea do a jump, jump to the Employee object in C #, as follows:
In object-oriented programming, it's all about attributes (Get/set), so think about how to check this out into JavaScript, and now let's skip back to the Dym_setprop function, which is not available in the Dym_setprop method obj[key]= The direct assignment of value, but to support set.
Copy Code code as follows:
function Dym_setprop (obj, key, value, FN) {
if (obj && key) {
fn (obj, key, value);
}
}
parameter FN, which does not directly manipulate any object in Dym_setprop, uses the function FN to replace the corresponding operation code, where there is a lot of free space in addition to supporting set.
Let's go deep into the Dym_setprop method, and now we're going to focus on the value of the parameter value, and we all know that value can be a values type, or it can be a function, and for a value type, you don't have to think about other things directly, it's not so simple for a function, It supports two types of operations:
1, directly assign the function to the new extended properties
2. Assign the return value performed by the function to the properties of the new extension
Copy Code code 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 chosen role for the above two operations, and parameter pass is an additional execution parameter. In addition, you may have some doubts about FN, because there are two places to use, the difference is only the number of parameters, what does FN represent?! Again think of the attribute in C #, it is Get/set, then FN (Obj,key) is quite with 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 Code code 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 +}, employee. Accessprop, True);
Seen so much, perhaps we feel depressed, simple dynamic expansion of the object program why to write in this way, there is no trouble to find a feeling, in fact, if you just want to do dynamic expansion objects, then I suggest you do not use the above dym_setprop ideas, but if you want to think from a more abstract perspective , it is a good idea to use the program within Dym_setprop as a template for executing a process, since Dym_setprop does not assume the execution of any specific code (Obj[key]=value or Obj[key]), which is replaced by the function FN. In this way, there is a completely free space for concrete implementation.
After understanding the above ideas, let us enter the core of this article, how does jquery implement dynamically expanding objects? Access functions,
Copy Code code 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 are true
exec =!pass && exec && jquery.isfunction (value);
for (var i = 0; i < length; 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 have found that it and dym_setprop have a high degree of trial, and it's just a bit more code:
Copy Code code 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 dynamic extended properties of Object objects. The specific execution process is shown in the following illustration:
Having finished writing here, this article tries to guess from its own perspective how the jquery developer designed the access function to support the dynamic extension object and explain the execution process of access. This is not necessarily true for me, but it doesn't interfere with my research on jquery.
