Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values-JS Tutorial-php.cn

Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values

伊谢尔伦

Release： 2017-07-21 13:33:57

Original

1356 people have browsed it

For...in loop Javascript example:

<html>
<head>
<title>一个使用到for...in循环的Javascript示例</title>
</head>
<body>
<script type="text/javascript">
// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "网页教程代码图库的中文站点";
//遍历对象的所有属性
for (prop in myObject)
{
document.write("属性 &#39;" + prop + "&#39; 为 " + myObject[prop]);
document.write("<br>");
}
</script>
</body>
</html>

Copy after login

/*
* 用来遍历指定对象所有的属性名称和值
* obj 需要遍历的对象
* author: Jet Mah
*/
function allPrpos ( obj ) {
// 用来保存所有的属性名称和值
var props = "" ;
// 开始遍历
for ( var p in obj ){
// 方法
if ( typeof ( obj [ p ]) == " function " ){
obj [ p ]() ;
} else {
// p 为属性名称，obj[p]为对应属性的值
props += p + " = " + obj [ p ] + " \t " ;
}
}
// 最后显示所有的属性
alert ( props ) ;
}

Copy after login

AJAX's JavaScript reflection mechanism. The reflection mechanism refers to the ability of the program to obtain its own information while running. For example, an object can know at runtime what methods and properties it has. Use the for(...in...) statement to implement reflection in JavaScript. The syntax is as follows:

for(var p in obj){
//语句
}

Copy after login

In Ajax programming, it is often necessary to dynamically change the style of interface elements. This can be changed through the style attribute of the object. , for example, if you want to change the background color to red, you can write like this:

element.style.backgroundColor="#ff0000";

Copy after login

Basically, all the properties in CSS can be used in JavaScript:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
}

Copy after login

Directly pass the entire style object as a parameter Come in:

var style={
color:#ffffff,
backgroundColor:#ff0000,
borderWidth:2px
}

Copy after login

At this time, you can call the function like this:
setStyle(style);

or write it directly as:

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

Copy after login

This code looks like There is no problem, but in fact, when the parameter _style is used to assign a value to element.style inside the setStyle function, if the element already has a certain style, for example, it has been executed:
element.style.height="20px" ;

However, _style does not include the definition of height, so the height style of the element is lost, which is not the originally desired result. To solve this problem, you can use the reflection mechanism to rewrite the setStyle function:

function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
}
}

Copy after login

The program traverses each attribute of _style to get the attribute name, and then uses square bracket syntax to set the corresponding attribute in element.style The attribute assignment is the

of the corresponding attribute in _style

The above is the detailed content of Detailed explanation of ajax reflection mechanism and code for traversing all object properties and values. For more information, please follow other related articles on the PHP Chinese website!