document.getElementById的值是什么？

Question

我是一位經驗豐富的程序員，但是我嘗試學習javascript，並且通過觀察事物的工作原理來學習最好。 我發現了一個腳本，可以淡化數組中的圖像。 這是腳本

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,1000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05; 
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
    imgs[current].style.display = "none";
    current = nIndex;
    setTimeout(so_xfade,1000);
} else {
    setTimeout(so_xfade,50);
}

function setOpacity(obj) {
    if(obj.xOpacity>.99) {
        obj.xOpacity = .99;
        return;
    }
    obj.style.opacity = obj.xOpacity;
    obj.style.MozOpacity = obj.xOpacity;
    obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}

我遇到的困難是這些線

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

和

if(!d.getElementById || !d.createElement)return;

我可以找到的所有內容都顯示window.addEventListener和d.getElementById分別是window對象和document對象的方法。 因此，在不帶任何參數的情況下調用它們時，它們的值是什么？在這些情況下，什么條件會使它們為真，什么條件會使它們為假。

Answer 1

代碼正在檢查這些方法是否存在，以及是否不使用其他方法（瀏覽器兼容性問題）或中止一個無論如何都會失敗的函數。

這行：

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

正在檢查是否存在window.addEventListener 。 如果是這樣，它正在調用它。 如果不存在，則調用window.attachEvent 。 這是為了處理IE的舊版本，該版本不具有addEventListener ，但具有類似的函數叫做attachEvent 。 大多數理智的程序員會將這種抽象放入實用程序函數或您調用的墊片中，以將其從常規編程中抽象出來。 IE9之前的所有版本的IE仍需要此邏輯。

這行：

if(!d.getElementById || !d.createElement)return;

如果getElementById或createElement任何一個都不作為對象d屬性/方法存在，則將中止該函數（並提前返回）。 不再需要進行此檢查，因為所有當前使用的瀏覽器中都存在這些方法（5.5中已添加到IE，1.0中包含在Firefox，Chrome和Safari中）。

Answer 2

if(!d.getElementById || !d.createElement)return;

此行進行測試以查看這些方法是否存在，即，它測試瀏覽器是否支持這兩種方法。 處理瀏覽器兼容性並不好玩，但是最好測試功能而不是瀏覽器版本。

Answer 3

如果使用不帶括號的函數名稱，則不會調用該函數，它為您提供了對該函數的引用。 一個非常簡單的示例：

function f1() { alert("hi"); }

var f2 = f1;    // This doesn't call the f1 function, it takes a reference
                // to it and assigns it to f2.
f2();           // Can call f2 since it refers to the same function; alerts "hi"

從中可以看到，函數名稱實際上只是變量，碰巧會保留對函數的引用，而不是對字符串或數字等的引用，如果您定義如下函數，則可能會更明顯：

var f3 = function() { alert("hello") };
f3();           // "hello"

那么，在這種背景下說if (someFunctionName)是什么意思？ 在JS中，表達式不僅是布爾值true，而且計算結果是非空字符串，非零數字或任何對象（甚至是空對象），都被認為是“真實的”。 空字符串，零，空，未定義和NaN都是“虛假的”。 在JavaScript中，布爾true與“ true ”之間的區別非常重要。 JS函數是一種對象。 所以：

if (someFunctionName)
// is testing if someFunctionName is "truthy" and is a shortcut way of saying
if (someFunctionName != undefined)
// also equivalent to
if (typeof someFunctionName != "undefined")

您要詢問的第二個示例if(d.getElementById)是測試對象d （設置為document ）是否具有名為getElementById的方法的測試。 一般而言，這是因為很久以前並不是所有的瀏覽器都支持該方法，因此該代碼旨在使代碼在所有瀏覽器中都能正常運行。 實際上，至少從IE5以來，就一直支持document.getElementById() ，因此該測試是多余的。

您詢問的第一個示例仍然有用，因為IE8和更早版本不支持window.addEventListener 。 所以代碼：

window.addEventListener ? window.addEventListener("load",so_init,false)
                        : window.attachEvent("onload",so_init);

正在使用三元運算符? : ? :測試是否定義了window.addEventListener 。 如果是，它將調用它，否則它將調用window.attachEvent （與舊版IE等效）。 所有現代瀏覽器都支持一種。

Answer 4

在這兩種情況下，腳本似乎都在實踐漸進式增強技術和優美的降級技術。 請查看本文，但總而言之，它正在檢查瀏覽器是否支持這些功能。