As we all know, javascript is a dynamic language, and its dynamic support is inherent. For example, there is an employee object,
The Code is as follows:
Function employee (){
This. e_id = 0;
This. e_name = "";
}
Now we need to dynamically add the "age" attribute and "toString ()" method for it,
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 of code is responsible for this work, which is supported by the Javascript built-in, but we often need to support a certain degree of extension on this basis, therefore, the simple code will be extracted into a method:
The Code is as follows:
Function dym_setprop (obj, key, value ){
If (obj & key ){
Obj [key] = value;
}
}
Here, let's jump to the employee object in C #, as shown below:
In object-oriented programming, all attributes (Get/Set) are used externally. Think about how to check this method into Javascript. Now let's jump back to the dym_setprop function, the direct value assignment method of obj [key] = value cannot be used in the dym_setprop method, but Set must be supported.
The Code is as follows:
Function dym_setprop (obj, key, value, fn ){
If (obj & key ){
Fn (obj, key, value );
}
}
The fn parameter does not directly operate any objects in dym_setprop. If you use the fn function to replace the corresponding operation code, there is a lot of free space in addition to Set.
Let's continue to go deep into the dym_setprop method. Now we focus on the parameter value. We all know that value can be a value type or function. For the value type, you can assign values directly without considering other things. This is not easy for functions. It supports two operations:
1. directly assign functions to new extended attributes
2. Assign the return value of function execution to the new extended attribute.
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 exec parameter acts as the role selected for the above two operations. The pass parameter is an additional execution parameter. In addition, you may have some questions about fn, because the above two areas are used. The difference is that the number of parameters is different. What does fn mean ?! Think about the properties in C # Again, it has Get/Set, so here fn (obj, key) is equivalent to Get, while fn (obj, key, temp, pass) is equivalent to Set.
For example, refer to the following code to define and use fn,
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 does a simple dynamic extension object program need to be written in this way? There is a feeling that it is okay to find something. Actually, it is not, if you only want to do dynamic extension objects, I suggest you do not use the above dym_setprop idea, but if you want to think more abstract, using the program in dym_setprop as a template for process execution, this is a good method, because dym_setprop does not undertake any specific code internally (obj [key] = value or obj [key]). it is replaced by the function fn, so that there is completely free space for specific execution.
After understanding the above ideas, let's go to the core of this Article. How does JQuery implement dynamic object extension? Access function,
The Code is as follows:
Function access (elems, key, value, exec, fn, pass ){
Var length = elems. length;
// Setting many butes
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 <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 access function code, you must find that it has a high level of test with dym_setprop, but it only has a piece of 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 dynamic extension attributes of object objects. The specific execution process is shown as follows:
This article tries to guess from its own perspective how JQuery developers designed access functions to support dynamic extension objects and explain the access execution process. In fact, this is not necessarily true for my guess, but it does not prevent my research on JQuery.
