blocks|key|1611904|text|在您的简单示例中，两种情况的结果没有区别。两者都完成了相同的任务。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1611905|使用此结构的原因：|1611906|(function()//doing+this
{
++++them.innerHTML+=+"Weird ";
})();|code-block|syntax|javascript|1611907|是创建一个函数作用域，该作用域可用于保存私有或临时变量，或者用于创建闭包，而不将内部变量暴露给外部世界。|1611908|至于第二个问题，window.onload的触发时间与放在正文末尾的脚本不同，因为window.onload是在页面所需的所有同步资源(如脚本和图像)加载完成时触发的。它既可以用来在所有这些资源加载完成时得到通知，也可以被不容易定位在主体末尾的代码用作页面准备就绪时的安全时间，尽管通常不需要等待那么长时间才能使DOM安全。|offset|length|style|CODE|1611909|entityMap^0|0|0|0|0|8|D|15|D|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

In your simple example, there is no difference between the result of the two cases. Both accomplish the same thing.

The reason for using this structure:

<pre><code>(function()//doing this
{
 them.innerHTML = "Weird&lt;br&gt;";
})();
</code></pre>

Is to create a function scope that can be used to hold private or temporary variables or to create a closure without exposing the variables inside to the outside world.

As for your second question, <code>window.onload</code> fires at a different time than scripts placed at the end of the body because <code>window.onload</code> fires when all synchronous resources needed by the page have finished loading (like scripts and images). It can be used, either to get notified when all these resources are done loading or it can be used by code that cannot be easily located at the end of the body as a safe time when the page is ready though it is usually not necessary to wait that long just for the DOM to be safe.

blocks|key|1629862|text|在上述情况下，使用第一种方法没有优势。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1629863|但是，在需要创建一些变量/方法但又不想污染全局名称空间的场景中，第一种方法更可取|1629864|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

In the above case there is not advantage in using the first method.

But the first method is preferable in scenarios where you need to create some variables/method but does not want to pollute the global name space

blocks|key|1629694|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1629695|你的两个例子没有区别。您的第一个示例创建了一个立即执行的匿名函数(称为立即调用的函数表达式)。你的第二个例子只是执行相同的代码。|ordered-list-item|1629696|你必须等到浏览器读取所有的HTML元素后，才能用JavaScript修改它们。当页面完全加载并且此时浏览器知道所有onload元素时，将触发HTML事件。但是，浏览器直到页面完全加载之后才会触发onload事件，这意味着浏览器将等到大图像完全加载之后--即使浏览器已经解析了HTML的其余部分--这使得JavaScript不必要地等待图像完成加载。因为浏览器在图像加载完成之前就知道所有的超文本标记语言，所以没有理由阻止JavaScript更早地执行。|offset|length|style|CODE|1629697|1629698|一旦人们发现onload在允许JavaScript执行之前等待了太长时间，人们就开始将他们的JavaScript放在<body>结束标记之前(不使用onload)，这样JavaScript就会在所有<body>解析完成后立即执行(除了结束<body>标记)，这样他们的JavaScript就可以比使用window.onload更快地开始执行。|1629699|现在，像jQuery这样的JavaScript库有一个事件，当浏览器知道所有的HTML时会触发事件--即使页面还没有完全加载(例如，由于图像没有完全加载)。|1629700|entityMap^0|0|0|1L|6|2P|6|0|0|6|6|1M|6|22|6|2R|6|3B|6|46|D|0|0^^$0|@$1|2|3|-4|4|5|6|Q|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|R|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|S|7|@$F|T|G|U|H|I]|$F|V|G|W|H|I]]|8|@]|9|$]]|$1|J|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|Y|7|@$F|Z|G|10|H|I]|$F|11|G|12|H|I]|$F|13|G|14|H|I]|$F|15|G|16|H|I]|$F|17|G|18|H|I]|$F|19|G|1A|H|I]]|8|@]|9|$]]|$1|M|3|N|4|5|6|1B|7|@]|8|@]|9|$]]|$1|O|3|-4|4|5|6|1C|7|@]|8|@]|9|$]]]|P|$]]

<ol>
<li>There is no difference between your two examples. Your first example creates an anonymous function that immediately executes (called an Immediately Invoked Function Expression). Your second example just executes the same code.</li>
<li>You have to wait until a browser reads all the HTML elements before you can change them with JavaScript. The <code>onload</code> event fires when the page has fully loaded and at that time the browser knows about all the HTML elements. However, a browser won't fire the <code>onload</code> event until after the page has fully loaded, which means the browser will wait until after a large image has fully loaded -- even though the browser has already parsed the rest of the HTML -- making your JavaScript needlessly wait until the image finishes loading. Because the browser knows about all the HTML before the image finishes loading there is no reason to prevent JavaScript from executing earlier.</li>
</ol>

Once people discovered that <code>onload</code> was waiting too long before allowing the JavaScript to execute, people started putting their JavaScript right before the closing <code>&lt;body&gt;</code> tag (without using <code>onload</code>), so that the JavaScript would execute as soon as all the HTML had been parsed (except for the closing <code>&lt;body&gt;</code> tag), and that way their JavaScript could start executing sooner than when using <code>window.onload</code>.

Now JavaScript libraries like jQuery have an event that fires when the browser knows about all the HTML -- even though the page hasn't fully loaded (e.g. due to images that haven't fully loaded).

blocks|key|489399|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|489400|你的第一个代码片段:是一个Module+Pattern或Immediately+Invoked+Function+Expression(IIFE)|unordered-list-item|offset|length|489401|489402|(()//执行此操作{+them.innerHTML+=“怪异”；})()；|489403|当Javascript编译器遇到此函数时，它将在遇到();时立即调用函数，并将变量和函数保持在其作用域内。|style|CODE|489404|489405|您必须阅读Java-script+Design+Patterns才能更好地理解它的用法，并且benefits.|489406|Second代码片段:只是一个JavaScript语句。|489407|489408|me.innerHTML+=“不是很奇怪”；//这样做|489409|当JavaScript编译器遇到这个问题时，它会立即执行。|489410|请记住，这两个代码段的执行都取决于它所在的位置。|489411|489412|So，来回答你的另一个问题。window.onload是在HTML+DOM完全加载并且浏览器可以读取其所有元素时激发的事件。|489413|489414|entityMap|0|LINK|mutability|MUTABLE|url|http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript|1|http://en.wikipedia.org/wiki/Immediately-invoked_function_expression|2|http://addyosmani.com/resources/essentialjsdesignpatterns/book|3|https://developer.mozilla.org/en-US/docs/Web/API/window.onload^0|0|D|E|0|S|19|1|0|0|0|Q|3|0|0|5|R|2|0|0|0|0|0|0|0|E|D|E|D|3|0|0^^$0|@$1|2|3|-4|4|5|6|1G|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1H|7|@]|8|@$D|1I|E|1J|1|1K]|$D|1L|E|1M|1|1N]]|9|$]]|$1|F|3|-4|4|5|6|1O|7|@]|8|@]|9|$]]|$1|G|3|H|4|5|6|1P|7|@]|8|@]|9|$]]|$1|I|3|J|4|C|6|1Q|7|@$D|1R|E|1S|K|L]]|8|@]|9|$]]|$1|M|3|-4|4|5|6|1T|7|@]|8|@]|9|$]]|$1|N|3|O|4|5|6|1U|7|@]|8|@$D|1V|E|1W|1|1X]]|9|$]]|$1|P|3|Q|4|C|6|1Y|7|@]|8|@]|9|$]]|$1|R|3|-4|4|5|6|1Z|7|@]|8|@]|9|$]]|$1|S|3|T|4|5|6|20|7|@]|8|@]|9|$]]|$1|U|3|V|4|5|6|21|7|@]|8|@]|9|$]]|$1|W|3|X|4|5|6|22|7|@]|8|@]|9|$]]|$1|Y|3|-4|4|5|6|23|7|@]|8|@]|9|$]]|$1|Z|3|10|4|C|6|24|7|@$D|25|E|26|K|L]]|8|@$D|27|E|28|1|29]]|9|$]]|$1|11|3|-4|4|5|6|2A|7|@]|8|@]|9|$]]|$1|12|3|-4|4|5|6|2B|7|@]|8|@]|9|$]]]|13|$14|$4|15|16|17|9|$18|19]]|1A|$4|15|16|17|9|$18|1B]]|1C|$4|15|16|17|9|$18|1D]]|1E|$4|15|16|17|9|$18|1F]]]]

<ul>
<li>Your first code snippet: is a <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript" rel="nofollow">Module Pattern</a> Or <a href="http://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow">Immediately Invoked Function Expression(IIFE)</a> 

<pre><code>(function()//doing this
{
 them.innerHTML = "Weird&lt;br&gt;";
})();
</code></pre></li>
<li>This when encountered by the Javascript compiler will immediately invoke the function when it encounters <code>();</code> and keeps the variables and functions within its scope. 

You must read <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book" rel="nofollow">Java-script Design Patterns</a> to better understand its use and benefits.</li>
<li>Second code snippet: is just a JavaScript statement.

<pre><code>me.innerHTML = "Not so weird&lt;br&gt;";//and doing this
</code></pre>

This when encountered by the JavaScript compiler will immediately execute it.</li>
</ul>

Remember both snippets executions depends on where its placed. 

<ul>
<li>So, to answer your other question. <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.onload" rel="nofollow"><code>window.onload</code></a> is an event fired when the HTML DOM is fully loaded and browser can read all its elements.</li>
</ul>

blocks|key|488358|text|经过深思熟虑后，编写如下所示的额外(function(){})();是有好处的(想象一下代码非常庞大)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|488359|(function()
{
++++var+text+=+"Span+'them'+text!";
++++them.innerHTML+=+text;
++++//Many+lines+of+code
})();

(function()
{
++++me.innerHTML+=+text;//will+throw+'text+is+undefined'
++++//Many+lines+of+code
})();|code-block|syntax|javascript|488360|这对于调试多行代码将非常方便，调试器将识别错误并直接“指向”它。|488361|而在这个例子中：|488362|var+text+=+"Span+'them'+text!";
them.innerHTML+=+text;
//Many+lines+of+code
//...
me.innerHTML+=+text;|488363|你的“错误”(调试器对此非常满意)将很难追踪到。|488364|entityMap^0|H|H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

After some thought, there is a benefit over writing the extra <code>(function(){})();</code> as shown (imagine the code is huge):

<pre><code>(function()
{
 var text = "Span 'them' text!";
 them.innerHTML = text;
 //Many lines of code
})();

(function()
{
 me.innerHTML = text;//will throw 'text is undefined'
 //Many lines of code
})();
</code></pre>

This will be quite handy for debugging many lines of code, the debugger would recognise the error and "point" straight to it.

Whereas with this example:

<pre><code>var text = "Span 'them' text!";
them.innerHTML = text;
//Many lines of code
//...
me.innerHTML = text;
</code></pre>

Your "error" (which the debugger is perfectly happy with) would be much harder to track down.

I saw an answer to some question earlier that used my <code>"Weird"</code> example, and I was wondering if there was any benefit to either method.

Some HTML:

<pre><code>&lt;span id="them"&gt;Hey&lt;/span&gt;
&lt;span id="me"&gt;Hey&lt;/span&gt;
</code></pre>

What is the difference between:

<pre><code>(function()//doing this
{
 them.innerHTML = "Weird&lt;br&gt;";
})();

me.innerHTML = "Not so weird&lt;br&gt;";//and doing this
</code></pre>

And even, why do people use <code>window.onload</code> when they can put scripts at the bottom of the body? Or is it just a matter of personal preference?

JavaScript Module Pattern(function(){})(); vs block statement

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我之前看到了使用我的"Weird"示例的一些问题的答案，我想知道这两种方法是否都有任何好处。一些HTML：HeyHey它们之间的区别是什么：(function()//doing this{ them.innerHTML = "...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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