有人可以帮我理解下面的代码块吗?

时间:2014-03-07 21:31:27

标签: javascript

我对下面的代码块感到有点困惑。我会在每行旁边评论一下我认为它意味着什么。如果有人可以帮助我澄清我的任何误解或确认我实际上正确地解释了它,我会非常感激。

以下是上下文中的代码:http://jsfiddle.net/MddHtt13/EMBZr/1/

  if(!window.onload) { // If the window is not loaded then...
        window.onload = function() { //Assign an anonymous function to the onload event
            onLoad(); //Which, upon execution of the onload event execute the onLoad function
        };
    }
    else { //This is probably the most confusing part
        var oldWindowLoadFunction = window.onload; //Else if the window is loaded, assign the onload event to the variable oldWindowLoadFunction
        window.onload = function() {  //Then upon completion of the onload event, assign an anonymous function 
            oldWindowLoadFunction(); //which then re-executes the onload event 
            onLoad(); //and then executes the onLoad function 
        };
    }

我不明白的第一件事是window.onload旁边的感叹号

if(!window.onload)

为什么我需要指定窗口是否尚未加载?我不是只想将onLoad()函数附加到onload事件上,以便在完成时触发吗?用以下的话说:

window.onload = onLoad();

为什么要额外的步骤?为什么if / else语句?


其次,为什么在代码块的后半部分我需要重新加载页面才重新连接onLoad()函数?那种让我回到刚才问的问题。为什么只需编写就更复杂了:

window.onload = onLoad();

当我将代码更改为一个简单的语句时,如上所述,它实际上并不起作用。但是,我仍然不完全理解代码块的每个部分的必要性 如果有人能够详细介绍这一点,那将非常有帮助。

修改
感谢下面的人的帮助,我用一个简单的声明替换了所有这些代码:

window.addEventListener('load', onLoad);

2 个答案:

答案 0 :(得分:1)

!是一个布尔反转:如果不是 window.onload为null或未定义,或者是更简洁的英语,如果名为onload的变量名为{ {1}}不为null或未定义。

逻辑基本上说,如果没有onload函数安装我的。如果有onload函数,则安装一个新的包装器函数,该函数调用现有函数,然后调用我的函数。

没有任何代码“重新加载”页面。您在加载页面时混淆了onload处理程序的分配。

该函数正在做的是 onload功能添加到窗口对象,该窗口对象可能已经具有onload功能,通过将添加的函数链接到原始,但仅在必要时

在今天的世界中,这一切都是多余的,因为您只需将事件监听器添加到要为onload事件执行的函数列表中。

答案 1 :(得分:1)

if (!window.onload) 

这是检查window.onload是否为空或未定义。如果window.onload已在其他地方定义,那么您可能不希望将其替换为onLoad()函数。

您的代码块基本上会检查是否在其他位置定义了window.onload。如果不是,请将onLoad()分配给window.onload。如果是,请执行现有的window.onload,然后再调用您的onLoad()功能。