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是窗口和文檔對象的方法分別。那麼當他們被調出沒有任何參數時，他們的價值是什麼？在這些情況下，什麼樣的條件會使他們真實，什麼樣的條件會使他們失實。

Answer 1

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

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

Answer 2

代碼正在檢查以查看這些方法是否存在，以及它們是否正在使用替代方法（瀏覽器兼容性問題）或中止將無法正常工作的函數。

這條線：

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，Firefox，Chrome和Safari中的1.0中）。

Answer 3

在這兩種情況下，腳本似乎都在練習漸進式enhancement techniques和優雅的降解技術。看看這篇文章，但總之，它檢查瀏覽器是否支持這些功能。

Answer 4

如果您使用沒有括號的函數名稱，它不會調用該函數，它會爲您提供對函數的引用。一個非常簡單的例子：

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中，表達式被認爲是「真理」，不僅僅是它是一個布爾真，而且它是一個非空字符串，一個非零數字或任何對象（甚至是一個空對象）。空字符串，零，null，undefined和NaN都是「虛假」。布爾型true與「truthy」之間的區別在JavaScript中非常重要。 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等效）。所有現代瀏覽器都支持其中一種。