【问题标题】:Could someone please help me to understand the following block of code?有人可以帮我理解以下代码块吗?
【发布时间】:2014-03-07 21:31:27
【问题描述】:

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

这是上下文中的代码: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);

【问题讨论】:

  • 仅供参考,没有理由在现代浏览器中使用这种复杂的附加 onload 处理程序的方法。只需使用window.addEventListener("load", fn) 将在现代浏览器中用更简单的代码完全取代它。
  • 我知道这看起来太复杂了@jfriend00

标签: javascript


【解决方案1】:

! 是布尔反转:如果 not window.onload 为 null 或未定义,或者用更简单的英语来说,如果名为 window 的对象中名为 onload 的变量不是null 或未定义。

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

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

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

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

【讨论】:

  • 所以第一部分只是检查窗口对象中是否存在 onload 变量,而不是检查窗口是否已加载。如果这确实存在,则将 onLoad() 函数分配给它。如果它不存在,则创建一个并将 onLoad() 函数分配给它。我是否正确解释了您的答案?虽然,我似乎在一件事上是对的:这段代码比它需要的更复杂。 @软件猴子
  • @MddHtt13:第一句话是对的,但后面的不是;它正在检查窗口对象中是否已经定义了 onload 处理程序;如果不是,则分配所需的处理程序,但如果是,则通过分配一个调用原始处理程序的包装函数,将新处理程序链接到现有处理程序,然后是新处理程序。
【解决方案2】:
if (!window.onload) 

这是检查window.onload 是否不为空或未定义。如果window.onload 已经在别处定义,那么您可能不想用您的onLoad() 函数替换它。

您的代码块主要检查window.onload 是否在其他地方定义。如果不是,请将onLoad() 分配给window.onload。如果是这样,请执行现有的window.onload,然后也调用您的onLoad() 函数。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-24
    • 2015-06-28
    • 1970-01-01
    • 2012-04-09
    • 2023-04-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多