Introduction to Ajax using for implementation reflection mechanism

Source: Internet
Author: User
Tags implement interface reflection
Ajax 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) {
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] ();
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: "#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 ();;
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,
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 assignment inside the SetStyle function, if the element already has a certain style, such as once executed: "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) {
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 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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.