Jquery alternative perspective-dynamic extension object

As we all know, JavaScript is a dynamic language, and its dynamic support is inherent.

For example, there is an employee object,

Function employee (){
This . E_id =   0 ;
This . E_name =   "" ;
}

Now we need to dynamically add the "Age" attribute and "tostring ()" method for it,

VaR empobj =   New Employee ();
Empobj [ " Age " ] =   20 ;
Empobj [ " Tostring " ] = Function (){ Return   This . E_id.tostring () +   This . E_name ;};

A simple lineCodeThis is the built-in support of JavaScript, but we often need to support a certain degree of expansion on this basis, so we will extract this line of simple code into a method:

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.

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.

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,

Employee. accessprop = Function (OBJ, key, value ){
If (Value ){
OBJ [Key] = Value;
}
Else {
Return OBJ [Key];
}
}

Dym_setprop (empobj,"Age", Function (Key, value ){ReturnValue+ 10;}, Employee. accessprop,True);

After reading so much, you may feel depressed and have simply expanded the object dynamically.ProgramWhy do you want to write it in this way? There is a sense that there is nothing to look for. Otherwise, if you only want to do dynamic extension objects, I suggest you do not use the above dym_setprop idea, however, if you want to think more abstract and use the program in dym_setprop as a template for process execution, this is a good method, because dym_setprop does not execute any specific code (OBJ [Key] = value or OBJ [Key]) internally, it is replaced by the FN function, in this way, 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,

Access Function

Function access (elems, key, value, exec, FN, pass ){
VaR Length = Elems. length;

// Setting 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 < 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:

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.