動(dòng)態(tài)屬性
Microsoft® Internet Explorer 5 提供了一種易于使用的新特性，該特性允許 Web 作者和開發(fā)者顯著提高 Web 頁的外觀和渲染速度。使用動(dòng)態(tài)屬性所帶來的無窮動(dòng)力，現(xiàn)在不僅可以聲明常量作為屬性值，還可以使用公式。在動(dòng)態(tài)屬性中使用的公式可以引用其他元素的屬性值，因此允許作者在設(shè)計(jì)他們的 Web 頁時(shí)獲得獨(dú)一無二的靈活性。
你可以使用動(dòng)態(tài)屬性完成以下功能：
- 創(chuàng)建電子表格外觀的表格，用戶在單元格中輸入值后可自動(dòng)重新計(jì)算總和。
- 將元素按照移動(dòng)的鼠標(biāo)指針重新定位。
- 根據(jù)定時(shí)器移動(dòng)元素。
更具創(chuàng)新的 Web 作者當(dāng)然可以很輕松的超越這里的幾個(gè)簡單的例子，使用動(dòng)態(tài)屬性的擴(kuò)展性能創(chuàng)造出更具感染力和智能的 Web 頁。
這篇文章包含如下幾個(gè)方面的主題。
動(dòng)態(tài)屬性的好處
動(dòng)態(tài)屬性大大簡化了文檔中所需的代碼，并使其維持在最小數(shù)量。使用動(dòng)態(tài)屬性，Web 作者可以用公式代替復(fù)雜的腳本來實(shí)現(xiàn)各種功能。這將把作者們從學(xué)習(xí)腳本語言的困擾中解脫出來，使他們專注于設(shè)計(jì)頁面的高級特性。
動(dòng)態(tài)屬性與電子表格中公式的實(shí)現(xiàn)有些類似。在電子表格中，一個(gè)單元格的值可以是常量或者公式。公式中可以引用電子表格中任意數(shù)量的其它單元格。同樣，動(dòng)態(tài)屬性也可以引用同一文檔中的其它屬性。
動(dòng)態(tài)屬性允許 Web 作者以函數(shù)的形式描述對象、屬性和變量之間關(guān)系，而不是顯式指定要執(zhí)行的計(jì)算步驟。作者幾乎只需要關(guān)心函數(shù)，而不需要監(jiān)視文檔的當(dāng)前狀態(tài)。
就事件的處理而言，在頁面重繪過程中牽涉越多效率也會(huì)越低。在文檔中，如果要實(shí)現(xiàn)一個(gè)涉及時(shí)不可能完全知曉的事件處理句柄(例如，由數(shù)據(jù)庫驅(qū)動(dòng)的 Web 頁和帶有數(shù)據(jù)綁定的頁面)，那么唯一的辦法是使用事件冒泡。造成的結(jié)果將是，作者經(jīng)常不得不在事件鏈的頂端完成一個(gè)單獨(dú)的全局處理程序來更新全部內(nèi)容。相反，使用動(dòng)態(tài)屬性，作者可以自動(dòng)決定屬性重算的最小算法和優(yōu)化算法，并且僅僅計(jì)算那些真的需要重算的表達(dá)式。
實(shí)現(xiàn)動(dòng)態(tài)屬性
動(dòng)態(tài)屬性的引入為 Internet Explorer 5 及更高版本帶來了新的方法。本節(jié)中簡要描述了這些方法。
- getExpression 方法返回用于動(dòng)態(tài)屬性的公式。
- recalc方法允許作者顯式更新動(dòng)態(tài)屬性的值。
- removeExpression 方法清除由 setExpression 方法設(shè)置的公式。
- setExpression 方法為給定值指定公式。
動(dòng)態(tài)屬性公式是用 setExpression 方法在腳本中指定的。當(dāng)然，也可以內(nèi)嵌指定，方法是在 style 塊或 style 屬性中使用 expression 這個(gè)全局值。
例如，動(dòng)態(tài) HTML (DHTML) 可用于根據(jù)其它對象的位置和尺寸定位對象。下列公式可分別用于水平和垂直居中對象。
- 水平居中對象：
object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);
- 垂直居中對象：
object.style.top=(document.body.clientHeight/2) - (object.offsetHeight/2);
在對象的位置被確定之后，如果客戶區(qū)的內(nèi)容或大小變更后，該對象在文檔布局中的外觀就會(huì)被迫更改。在上面的例子中，由于使用了動(dòng)態(tài)屬性，無論客戶區(qū)被怎樣重新縮放，作者都無需不停的更新對象位置。在 Internet Explorer 5 之前，Web 作者就不得不使用 onresize 事件的處理句柄來捕捉客戶區(qū)的更改并手工重算位置。請注意，公式是相同的，但是它們是通過 setExpression 方法實(shí)現(xiàn)的。
下面的例子演示了表達(dá)式的設(shè)置方法。
<SCRIPT>
window.onload=fnInit;
function fnInit(){
oDiv.style.setExpression("left",
"document.body.clientWidth/2 - oDiv.offsetWidth/2"
);
oDiv.style.setExpression("top",
"document.body.clientHeight/2 - oDiv.offsetHeight/2"
);
}
</SCRIPT>
<DIV ID="oDiv"
STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"
>
示例 DIV
</DIV>
在某些情況下，如果要將一個(gè)關(guān)鍵對象移動(dòng)到新位置，則需要許多額外的腳本執(zhí)行新的計(jì)算。如果該對象的位置與其它對象相關(guān)的話，則需要更多細(xì)心的考慮。
例如，如果有四個(gè) DIV 元素定位于第五個(gè) DIV 周圍，而第五個(gè)位于屏幕中央并可由用戶自動(dòng)移動(dòng)，那么更新環(huán)繞的四個(gè) DIV 元素將是十分耗費(fèi)時(shí)間的。此外，如果外圍的 DIV 元素還包含可由用戶更改的變量，那么 Web 就需要不停的監(jiān)視變量的值然后更新相應(yīng)的位置。這里的做法是，使用表達(dá)式可讓所有這一切變得簡單起來。
下面的示例代碼演示了如何使用腳本變量根據(jù)其它對象的位置和尺寸設(shè)置表達(dá)式。
<STYLE>
.block {position: absolute; top: 100; left: 100; height: 75; width: 75;}
.block2 {position: absolute; top: 0; left: 0; height: 25; width: 25;}
</STYLE>
<SCRIPT>
window.onload=fnInit;
var iOffset=10;
function fnInit(){
oDiv.style.left=document.body.clientWidth/2 - oDiv.offsetWidth/2;
oDiv.style.top=document.body.clientHeight/2 - oDiv.offsetHeight/2;
oBlock1.style.setExpression("top","
(oDiv.style.pixelTop - iOffset
- oBlock1.style.pixelHeight)
");
oBlock1.style.setExpression("left","
(oDiv.style.pixelLeft +
(oDiv.style.pixelWidth/2 - oBlock1.style.pixelWidth/2))
");
}
</SCRIPT>
<DIV ID="oDiv" CLASS="block"></DIV>
<DIV ID="oBlock1" CLASS="block2"></DIV>
至于腳本，動(dòng)態(tài)屬性可以是任何合法的 Microsoft® JScript® 或 Microsoft® Visual Basic® 腳本版本(VBScript)語句。setExpression 的第三個(gè)參數(shù)就是用于表明第二個(gè)參數(shù)中所使用的腳本語言；而 JScript 是默認(rèn)語言。對于內(nèi)嵌實(shí)現(xiàn)來說，表達(dá)式就必須用 JScript 編寫。在表達(dá)式重算的時(shí)候，字符串中的標(biāo)識符會(huì)被解析為當(dāng)前頁面上的實(shí)際屬性。
下面的示例代碼演示了如何通過 setExpression 方法設(shè)置動(dòng)態(tài)屬性。
/* 設(shè)置對象的寬度為客戶區(qū)寬度的一半。*/
// 用 setExpression 設(shè)置表達(dá)式：
object.style.setExpression("width","document.body.clientWidth/2");
動(dòng)態(tài)屬性可以使用 getExpression 和 removeExpression 方法獲取或刪除。getExpression 方法返回一個(gè)變體變量，其中包含用于計(jì)算動(dòng)態(tài)屬性的表達(dá)式。該表達(dá)式會(huì)在調(diào)用 getExpression 方法是重算。使用 removeExpression 方法可以清除表達(dá)式。如果想要清除用 setExpression 方法設(shè)置的動(dòng)態(tài)屬性值，removeExpression 是唯一的方法。如果清除了表達(dá)式，屬性值會(huì)被設(shè)為表達(dá)式上次的計(jì)算結(jié)果，并且會(huì)返回一個(gè) Boolean 值，表明表達(dá)式已經(jīng)被刪除了。
recalc 方法用于重算文檔中的動(dòng)態(tài)屬性。此方法十分有用，因?yàn)閯?dòng)態(tài)屬性只會(huì)更新在公式中聲明的元素和屬性。調(diào)用 recalc 方法并將參數(shù)設(shè)置為 false (默認(rèn)值) 將重算當(dāng)前文檔中的所有表達(dá)式，只要該表達(dá)式所引用的屬性自上次重算后發(fā)生了更改。調(diào)用 recalc(true) 將重算當(dāng)前文檔中的所有表達(dá)式，而不管所引用的屬性是否發(fā)生了更改。在一個(gè)動(dòng)態(tài)屬性重算以后，所有對該屬性的引用都會(huì)得到新計(jì)算的值。
下面的示例演示了 recalc 方法的用途，即顯式更新頁面上太陽系對象的動(dòng)態(tài)屬性。
隱式依賴的說明
某些屬性可能會(huì)因?yàn)槠渌鼘傩缘淖兏鸶模瑢@些屬性的引用就構(gòu)成了隱式依賴。例如，元素的 offsetWidth 依賴于 width，并且還可能依賴于樣式表中的 height 值。
在大多數(shù)情況下，作者并不需要擔(dān)心這些依賴；Internet Explorer 5 會(huì)自動(dòng)處理絕大多數(shù)情況。處理的方法就是為了跟蹤依賴性的目的，將特定屬性映射到標(biāo)準(zhǔn)屬性上。例如，所有 width 屬性的標(biāo)準(zhǔn)屬性就是 offsetWidth。例如 img 元素，對其 clientWidth, width, posWidth, pixelWidth, currentStyle.width 或 width 的依賴實(shí)際上都是對 offsetWidth 的依賴。
盡管 Internet Explorer 能夠自動(dòng)處理大多數(shù)情況下的隱式依賴，還是有一些情況下依賴并不十分明顯。因?yàn)閷?shí)際屬性仍然會(huì)觸發(fā)屬性變更通知，重算引擎通常會(huì)知道是否需要重算表達(dá)式。但是，涉及這些屬性的循環(huán)表達(dá)式只能在運(yùn)行時(shí)刻被檢測出(在將表達(dá)式被設(shè)置到屬性上時(shí)無法預(yù)知)�？赡茏顝�(fù)雜的依賴情況就是 DIV 的 clientHeight。DIV 最終計(jì)算出的 clientHeight 依賴于 innerHTML，margin 屬性，padding 屬性，當(dāng)然還有 width。