首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >函数模块模式( JavaScript (){})();vs block语句

函数模块模式( JavaScript (){})();vs block语句
EN

Stack Overflow用户
提问于 2013-05-31 11:32:42
回答 5查看 885关注 0票数 2

我之前看到了使用我的"Weird"示例的一些问题的答案,我想知道这两种方法是否都有任何好处。

一些HTML:

代码语言:javascript
运行
复制
<span id="them">Hey</span>
<span id="me">Hey</span>

它们之间的区别是什么:

代码语言:javascript
运行
复制
(function()//doing this
{
    them.innerHTML = "Weird<br>";
})();

me.innerHTML = "Not so weird<br>";//and doing this

甚至,当人们可以将脚本放在正文的底部时,为什么还要使用window.onload?或者这只是个人喜好的问题?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-05-31 11:52:43

  • 你的第一个代码片段:是一个Module PatternImmediately Invoked Function Expression(IIFE)

(()//执行此操作{ them.innerHTML =“怪异”;})();

  • 当Javascript编译器遇到此函数时,它将在遇到();时立即调用函数,并将变量和函数保持在其作用域内。

您必须阅读Java-script Design Patterns才能更好地理解它的用法,并且benefits.

  • Second代码片段:只是一个JavaScript语句。

me.innerHTML =“不是很奇怪”;//这样做

当JavaScript编译器遇到这个问题时,它会立即执行。

请记住,这两个代码段的执行都取决于它所在的位置。

  • So,来回答你的另一个问题。window.onload是在HTML DOM完全加载并且浏览器可以读取其所有元素时激发的事件。
票数 2
EN

Stack Overflow用户

发布于 2013-05-31 11:47:52

  1. 你的两个例子没有区别。您的第一个示例创建了一个立即执行的匿名函数(称为立即调用的函数表达式)。你的第二个例子只是执行相同的代码。
  2. 你必须等到浏览器读取所有的HTML元素后,才能用JavaScript修改它们。当页面完全加载并且此时浏览器知道所有onload元素时,将触发HTML事件。但是,浏览器直到页面完全加载之后才会触发onload事件,这意味着浏览器将等到大图像完全加载之后--即使浏览器已经解析了HTML的其余部分--这使得JavaScript不必要地等待图像完成加载。因为浏览器在图像加载完成之前就知道所有的超文本标记语言,所以没有理由阻止JavaScript更早地执行。

一旦人们发现onload在允许JavaScript执行之前等待了太长时间,人们就开始将他们的JavaScript放在<body>结束标记之前(不使用onload),这样JavaScript就会在所有<body>解析完成后立即执行(除了结束<body>标记),这样他们的JavaScript就可以比使用window.onload更快地开始执行。

现在,像jQuery这样的JavaScript库有一个事件,当浏览器知道所有的HTML时会触发事件--即使页面还没有完全加载(例如,由于图像没有完全加载)。

票数 2
EN

Stack Overflow用户

发布于 2013-05-31 11:46:31

在您的简单示例中,两种情况的结果没有区别。两者都完成了相同的任务。

使用此结构的原因:

代码语言:javascript
运行
复制
(function()//doing this
{
    them.innerHTML = "Weird<br>";
})();

是创建一个函数作用域,该作用域可用于保存私有或临时变量,或者用于创建闭包,而不将内部变量暴露给外部世界。

至于第二个问题,window.onload的触发时间与放在正文末尾的脚本不同,因为window.onload是在页面所需的所有同步资源(如脚本和图像)加载完成时触发的。它既可以用来在所有这些资源加载完成时得到通知,也可以被不容易定位在主体末尾的代码用作页面准备就绪时的安全时间,尽管通常不需要等待那么长时间才能使DOM安全。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16849330

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档