javascript - 为什么这个 HTML javascript 包含在花括号中？

Question

我正在尝试理解此源代码以学习如何制作艺术 block 。

https://api.artblocks.io/generator/9000000

代码如下所示:

<script>
  'use strict';
  {
    ....
  }
</script>

为什么 HTML 中的整个脚本都用大括号括起来？为什么脚本仍然有效？

Answer 1

这只是一个普通的 block 。

Why is the whole script in the HTML wrapped in curly braces?

大概是为了避免创建或干扰全局变量——就像一个 IIFE。否则，如果整个脚本位于顶层，则可能会导致在同一页面上运行的其他脚本出现问题。

例如，如果有

<script>
// script 1
const someElement = document.querySelector('.something');
</script>

<script>
// unrelated script 2
const someElement = document.querySelector('.somethingElse');
</script>

将抛出一个错误，因为两个脚本都在用它们的变量填充顶层。将独立脚本放入它们自己的 block 中可以显着降低名称冲突的可能性，因此

<script>
// script 1
{
  const someElement = document.querySelector('.something');
  // other code
}
</script>

也就是说，一个 IIFE is probably a better approach - 它更常见，更兼容，并且没有 problems with function declarations .

<script>
// script 1
(function() {
  const someElement = document.querySelector('.something');
  // other code
})();
</script>