каково значение 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. Большинство здравомыслящих программистов помещают эту абстракцию в служебную функцию или оболочку, которую вы вызываете, чтобы абстрагировать ее от нормального программирования. Эта логика все еще необходима во всех версиях IE до IE9.

Эта строка:

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

прерывает функцию (с ранним возвратом), если либо getElementById, либо createElement не существует как свойства / методы для объекта d. Эта проверка больше не нужна, поскольку эти методы существуют во всех используемых в настоящее время браузерах (добавлены в IE в 5.5, представлены в Firefox, Chrome и Safari в 1.0).

Answer 2

Если вы используете имя функции без скобок, она не вызывает функцию, она дает вам ссылку на функцию. Действительно простой пример:

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 выражение считается «правдивым» не только в том случае, если оно имеет логическое значение «истина», но если оно оценивается как непустая строка, ненулевое число или любой объект (даже пустой объект). Пустые строки, ноль, ноль, неопределенный и NaN все "ложные". Это различие между логическим true и «правдивым» очень важно в 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. В общем смысле это потому, что давным-давно не все браузеры поддерживали этот метод, поэтому этот код был предназначен для того, чтобы код мог работать во всех браузерах без ошибок. На практике document.getElementById() поддерживается по крайней мере со времен IE5, поэтому этот тест является избыточным.

Первый пример, о котором вы спрашивали, все еще актуален, поскольку IE8 и старше не поддерживают window.addEventListener. Итак, код:

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

использует троичный оператор ? :, чтобы проверить, определено ли window.addEventListener. Если это так, он вызывает его, в противном случае он вызывает window.attachEvent (что является старым эквивалентом IE). Все современные браузеры поддерживают один или другой.

Answer 3

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

Эта строка проверяет, существуют ли методы вообще, т. Е. Проверяет, поддерживает ли браузер оба метода. Работать с совместимостью с браузером - не весело, но лучше проверить функциональность, чем версию браузера.

Answer 4

В обоих случаях в сценарии, по-видимому, используются прогрессивные методы улучшения и методы постепенной деградации. Просмотрите статью, но вкратце, она проверяет, поддерживает ли браузер эти функции.