AJAX入門之使用for實現反射機制

2024-07-21 02:28:54

字體：大中小

來源：轉載

供稿：網友

　　什么是反射機制

　　反射機制指的是程序在運行時能夠獲取自身的信息。例如一個對象能夠在運行時知道自己有哪些方法和屬性。

　　在javascript中利用for(…in…)語句實現反射

　　在javascript中有一個很方便的語法來實現反射，即for(…in…)語句，其語法如下：

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

　　這里var p表示聲明的一個變量，用以存儲對象obj的屬性（方法）名稱，有了對象名和屬性（方法）名，就可以使用方括號語法來調用一個對象的屬性（方法）：

for(var p in obj){
　　　　　 if(typeof(obj[p]=="function"){
　　　　　　　　　　　　 obj[p]();
　　　　　 }else{
　　　　　　　　　　　　 alert(obj[p]);
　　　　　 }
}

　　這段語句遍歷obj對象的所有屬性和方法，遇到屬性則彈出它的值，遇到方法則立刻執行。在后面可以看到，在面向對象的javascript程序設計中，反射機制是很重要的一種技術，它在實現類的繼承中發揮了很大的作用。

　　使用反射來傳遞樣式參數

　　在ajax編程中，經常要能動態的改變界面元素的樣式，這可以通過對象的style屬性來改變，比如要改變背景色為紅色，可以這樣寫：

element.style.backgroundcolor="#ff0000";

　　其中style對象有很多屬性，基本上css里擁有的屬性在javascript中都能夠使用。如果一個函數接收參數用用指定一個界面元素的樣式，顯然一個或幾個參數是不能符合要求的，下面是一種實現：

function setstyle(_style){
　　　　　 //得到要改變樣式的界面對象
　　　　　 var element=getelement();
　　　　　 element.style=_style;
}

　　這樣，直接將整個style對象作為參數傳遞了進來，一個style對象可能的形式是：

var style={
　　　　　 color:#ffffff,
　　　　　 backgroundcolor:#ff0000,
　　　　　 borderwidth:2px
}

　　這時可以這樣調用函數：

setstyle(style);

　　或者直接寫為：

setstyle({ color:#ffffff,backgroundcolor:#ff0000,borderwidth:2px});

　　這段代碼看上去沒有任何問題，但實際上，在setstyle函數內部使用參數_style為element.style賦值時，如果element原先已經有了一定的樣式，例如曾經執行過：

element.style.height="20px";

　　而_style中卻沒有包括對height的定義，因此element的height樣式就丟失了，不是最初所要的結果。要解決這個問題，可以用反射機制來重寫setstyle函數：

function setstyle(_style){
　　　　　 //得到要改變樣式的界面對象
　　　　　 var element=getelement();
　　　　　 for(var p in _style){
　　　　　　　　　　　 element.style[p]=_style[p];
　　　　　 }
}

　　程序中遍歷_style的每個屬性，得到屬性名稱，然后再使用方括號語法將element.style中的對應的屬性賦值為_style中的相應屬性的值。從而，element中僅改變指定的樣式，而其他樣式不會改變，得到了所要的結果。

商業源碼熱門下載www.html.org.cn

上一篇：探討一種AJAX性能的改進方法

下一篇：打造Ajax簡單相冊