The reflection mechanism of Ajax JavaScript

Ajax|javascript What is reflection mechanism

Reflection mechanism refers to the ability of a program to obtain its own information at run time. For example, an object can know at runtime what methods and attributes they have.

use for (... in ...) in JavaScript Statement to implement Reflection

There is a handy syntax in JavaScript to implement reflection, i.e. for (... in ...) Statement, whose syntax is as follows:

For (var p in obj) {
Statement
}
Here Var p represents a declared variable that stores the property (method) name of the object obj, with the name of the object and the property (method), and can use the bracket syntax to invoke an object's properties (method):

For (var p in obj) {
if (typeof (obj[p]== "function") {
Obj[p] ();
}else{
Alert (obj[p]);
}
}
This statement iterates through all the properties and methods of the Obj object, pops its value when it encounters a property, and executes immediately when the method is encountered. As you can see, the reflection mechanism is a very important technique in object-oriented JavaScript programming, which plays a great role in the implementation of class inheritance.

　　 using reflection to pass style parameters

In AJAX programming, it is often possible to dynamically change the style of an interface element, which can be changed by the object's style attribute, such as to change the background color to red, which can be written like this:

Element.style.backgroundcolor= "#ff0000";
The style object has many attributes, and basically the attributes that are in the CSS are available in JavaScript. If a function receives a parameter using a style that specifies an element of an interface, it is obvious that one or several parameters are not eligible, and here is an implementation:

function SetStyle (_style) {
Get the interface object to change the style
var element=getelement ();
Element.style=_style;
}
In this way, the entire style object is passed directly as an argument, and a style object may be in the form of:

var style={
Color: #ffffff,
BackgroundColor: #ff0000,
borderwidth:2px
}
You can call the function this way:

SetStyle (style);
or write directly as:

SetStyle ({color: #ffffff, BackgroundColor: #ff0000, borderwidth:2px});
This code does not seem to have any problems, but in fact, when you use the parameter _style for Element.style assignment inside the SetStyle function, if the element already has a certain style, such as once executed:

Element.style.height= "20px";
The _style does not include the definition of height, so the height style of the element is lost, not the original result. To solve this problem, you can override the SetStyle function with a reflection mechanism:

function SetStyle (_style) {
Get the interface object to change the style
var element=getelement ();
For (var p in _style) {
ELEMENT.STYLE[P]=_STYLE[P];
}
}
The program iterates through each property of the _style, gets the property name, and then uses the bracket syntax to assign the corresponding property in the Element.style to the value of the corresponding property in _style. Thus, only the specified style is changed in the element, and the other styles do not change, and the desired result is obtained.