HTML：活文档标准

以下全局对象对都位于同一个 代理集群 中，因此可以使用 SharedArrayBuffer 实例相互共享内存

• Window 对象及其创建的专用工作线程。

• 工作线程（任何类型）及其创建的专用工作线程。

• Window 对象 A 和 A 创建的 iframe 元素的 Window 对象，该对象可能与 A 同源域。

• Window 对象和打开它的 同源域 Window 对象。

• Window 对象及其创建的 worklet。

以下全局对象对不在同一个 代理集群 中，因此无法共享内存

• Window 对象及其创建的共享工作线程。

• 工作线程（任何类型）及其创建的共享工作线程。

• Window 对象及其创建的服务工作线程。

• Window 对象 A 和 A 创建的 iframe 元素的 Window 对象，该对象不能与 A 同源域。

• 任何两个没有 opener 或祖先关系的 Window 对象。即使这两个 Window 对象 同源，也适用此规则。

导入映射最简单的用法是全局重新映射裸模块说明符

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js"
  }
}

这使得像import moment from "moment";这样的语句能够工作，获取并评估位于/node_modules/moment/src/moment.js URL 的 JavaScript 模块。

导入映射可以通过使用尾部斜杠将一类模块说明符重新映射到一类 URL，如下所示

{
  "imports": {
    "moment/": "/node_modules/moment/src/"
  }
}

这使得像import localeData from "moment/locale/zh-cn.js";这样的语句能够工作，获取并评估位于/node_modules/moment/src/locale/zh-cn.js URL 的 JavaScript 模块。此类尾部斜杠映射通常与裸说明符映射组合使用，例如

{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "moment/": "/node_modules/moment/src/"
  }
}

以便“moment”指定的“主模块”和“moment/locale/zh-cn.js”等路径指定的“子模块”都可用。

裸说明符并不是导入映射可以重新映射的唯一类型的模块说明符。“类似 URL”的说明符，即那些可以解析为绝对 URL 或以“/”、“./”或“../”开头的说明符，也可以被重新映射

{
  "imports": {
    "https://cdn.example.com/vue/dist/vue.runtime.esm.js": "/node_modules/vue/dist/vue.runtime.esm.js",
    "/js/app.mjs": "/js/app-8e0d62a03.mjs",
    "../helpers/": "https://cdn.example/helpers/"
  }
}

请注意，要重新映射的 URL 以及要映射到的 URL 可以指定为绝对 URL，也可以指定为以“/”、“./”或“../”开头的相对 URL。（它们不能指定为没有这些起始符号的相对 URL，因为这些符号有助于将它们与裸模块说明符区分开来。）还要注意，尾部斜杠映射在此上下文中也能正常工作。

此类重新映射在规范化后的 URL 上进行操作，并且不需要在导入映射键中提供的字面字符串与导入的模块说明符之间进行匹配。例如，如果此导入映射包含在https://example.com/app.html上，那么不仅import "/js/app.mjs"会被重新映射，而且import "./js/app.mjs"和import "./foo/../js/app.mjs"也会被重新映射。

所有以前的示例都通过在导入映射中使用顶层的“imports”键全局重新映射了模块说明符。顶层的“scopes”键可用于提供本地化重新映射，这些重新映射仅在引用模块与特定 URL 前缀匹配时才适用。例如

{
  "scopes": {
    "/a/" : {
      "moment": "/node_modules/moment/src/moment.js"
    },
    "/b/" : {
      "moment": "https://cdn.example.com/moment/src/moment.js"
    }
  }
}

使用此导入映射，语句import "moment"将具有不同的含义，具体取决于包含该语句的哪个引用脚本

• 在位于/a/下的脚本中，这将导入/node_modules/moment/src/moment.js。

• 在位于/b/下的脚本中，这将导入https://cdn.example.com/moment/src/moment.js。

• 在位于/c/下的脚本中，这将无法解析，因此会抛出异常。

作用域的典型用法是允许在 Web 应用程序中存在“相同”模块的多个版本，其中模块图的某些部分导入一个版本，而其他部分导入另一个版本。

作用域可以相互重叠，并与全局“imports”说明符映射重叠。在解析时，将按从最具体到最不具体的顺序咨询作用域，其中具体性是通过使用代码单元小于操作对作用域进行排序来衡量的。例如，“/scope2/scope3/”被视为比“/scope2/”更具体，后者又被视为比顶层（无作用域）映射更具体。

下面的导入映射说明了这一点

{
  "imports": {
    "a": "/a-1.mjs",
    "b": "/b-1.mjs",
    "c": "/c-1.mjs"
  },
  "scopes": {
    "/scope2/": {
      "a": "/a-2.mjs"
    },
    "/scope2/scope3/": {
      "b": "/b-3.mjs"
    }
  }
}

这将导致以下解析（为简洁起见，使用相对 URL）

		说明符
		"a"	"b"	"c"
引用者	/scope1/r.mjs	/a-1.mjs	/b-1.mjs	/c-1.mjs
	/scope2/r.mjs	/a-2.mjs	/b-1.mjs	/c-1.mjs
	/scope2/scope3/r.mjs	/a-2.mjs	/b-3.mjs	/c-1.mjs

导入映射还可以用于为模块提供完整性元数据，以用于子资源完整性检查。[SRI]

下面的导入映射说明了这一点

{
  "imports": {
    "a": "/a-1.mjs",
    "b": "/b-1.mjs",
    "c": "/c-1.mjs"
  },
  "integrity": {
    "/a-1.mjs": "sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7",
    "/d-1.mjs": "sha384-MBO5IDfYaE6c6Aao94oZrIOiC6CGiSN2n4QUbHNPhzk5Xhm0djZLQqTpL0HzTUxk"
  }
}

上面的示例提供了要对模块/a-1.mjs和/d-1.mjs执行的完整性元数据，即使后者未在映射中定义为导入。

由于模块映射以（URL，模块类型）为键，因此以下代码将在模块映射中创建三个单独的条目，因为它导致了三个不同的（URL，模块类型）元组（全部具有“javascript-or-wasm”类型）

import "https://example.com/module.mjs";
import "https://example.com/module.mjs#map-buster";
import "https://example.com/module.mjs?debug=true";

也就是说，URL查询和片段可以有所不同以在模块映射中创建不同的条目；它们不会被忽略。因此，将执行三个单独的获取和三个单独的模块评估。

相反，以下代码只会创建模块映射中的单个条目，因为在将URL 解析器应用于这些输入后，生成的URL 记录是相等的。

import "https://example.com/module2.mjs";
import "https:example.com/module2.mjs";
import "https://///example.com\\module2.mjs";
import "https://example.com/foo/../module2.mjs";

因此，在这个第二个示例中，只会发生一次获取和一次模块评估。

请注意，此行为与共享工作线程如何通过其解析的构造函数 URL进行键控相同。

由于模块类型也是模块映射键的一部分，因此以下代码将在模块映射中创建两个单独的条目（第一个的类型为“javascript-or-wasm”，第二个的类型为“css”）。

<script type=module>
  import "https://example.com/module";
</script>
<script type=module>
  import "https://example.com/module" with { type: "css" };
</script>

这可能导致执行两次单独的获取和两次单独的模块评估。

在实践中，由于尚未指定的内存缓存（请参阅问题#6110），资源可能只在基于 WebKit 和 Blink 的浏览器中获取一次。此外，只要所有模块类型都是互斥的，获取单个模块脚本中的模块类型检查对于至少一个导入都会失败，因此最多只会发生一个模块评估。

在模块映射键中包含类型的目的是，类型属性错误的导入不会阻止具有相同说明符但类型正确的不同导入成功。

从另一个 JavaScript 模块导入时，JavaScript 模块脚本是默认的导入类型；也就是说，当import语句缺少type导入属性时，导入的模块脚本的类型将为 JavaScript。尝试使用带有type导入属性的import语句导入 JavaScript 资源将失败。

<script type="module">
    // All of the following will fail, assuming that the imported .mjs files are served with a
    // JavaScript MIME type. JavaScript module scripts are the default and cannot be imported with
    // any import type attribute.
    import foo from "./foo.mjs" with { type: "javascript" };
    import foo2 from "./foo2.mjs" with { type: "js" };
    import foo3 from "./foo3.mjs" with { type: "" };
    await import("./foo4.mjs", { with: { type: null } });
    await import("./foo5.mjs", { with: { type: undefined } });
</script>

此示例演示了事件侦听器调用的顺序。如果用户在此示例中单击按钮，页面将显示四个警报，文本分别为“ONE”、“TWO”、“THREE”和“FOUR”。

<button id="test">Start Demo</button>
<script>
 var button = document.getElementById('test');
 button.addEventListener('click', function () { alert('ONE') }, false);
 button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
 button.addEventListener('click', function () { alert('THREE') }, false);
 button.onclick = function () { alert('TWO'); };
 button.addEventListener('click', function () { alert('FOUR') }, false);
</script>

但是，在以下示例中，事件处理程序在其初始激活（及其事件侦听器已移除）后被停用，然后在稍后重新激活。页面将依次显示五个警报，文本分别为“ONE”、“TWO”、“THREE”、“FOUR”和“FIVE”。

<button id="test">Start Demo</button>
<script>
 var button = document.getElementById('test');
 button.addEventListener('click', function () { alert('ONE') }, false);
 button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler is activated here
 button.addEventListener('click', function () { alert('TWO') }, false);
 button.onclick = null;                                 // but deactivated here
 button.addEventListener('click', function () { alert('THREE') }, false);
 button.onclick = function () { alert('FOUR'); };       // and re-activated here
 button.addEventListener('click', function () { alert('FIVE') }, false);
</script>

例如，以下文档片段

<body onload="alert(this)" onclick="alert(this)">

...在文档加载时导致显示“[object Window]”的警报，并在用户在页面中单击任何内容时导致显示“[object HTMLBodyElement]”的警报。

window.onerror = (message, source, lineno, colno, error) => { … };

强烈建议开发人员使用 self.origin 而不是 location.origin。前者返回环境的来源，后者返回环境的 URL。想象一下以下脚本在 https://stargate.example/ 上的文档中执行

var frame = document.createElement("iframe")
frame.onload = function() {
  var frameWin = frame.contentWindow
  console.log(frameWin.location.origin) // "null"
  console.log(frameWin.origin) // "https://stargate.example"
}
document.body.appendChild(frame)

self.origin 是一个更可靠的安全指标。