javascript - `HTMLImports.whenReady` 和 `window.addEventListener(' WebComponentsReady 有什么区别', function(e) {`

Question

HTMLImports.whenReady 和 window.addEventListener('WebComponentsReady', function(e) {} 有什么区别？

Polymer's official documentation说:

"To define an element in your main HTML document, define the element from HTMLImports.whenReady(callback). callback is invoked when all imports in the document have finished loading."

Webcomponents.org's official documentation on imports说:

Under native imports, tags in the main document block the loading of imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded. This native behavior is difficult to polyfill so the HTML Imports polyfill doesn't try. Instead the WebComponentsReady event is a stand in for this behavior:

两者有什么区别？

Answer 1

它们几乎 * 相同:两者同时触发。

因此您可以在 callback 之间选择您喜欢的口味和 Event .

Nota Bene:如果出于某些原因，您引用了 CustomElement.js单独的 polyfill(即没有 HTMLImports.js 特性)，只有 WebComponentsReady事件将被抛出。

(我更喜欢使用 Event Handler，因为在第一种情况下，您需要确保定义了 HTMLImports，并且因为它是唯一记录的 API here)

---

*:它们当然不同!区别在引用的定义中说明。

• 后者正在等待自定义元素被实例化。它由 CustomElement.js 触发polyfill.
• 第一个是只等待加载和解析导入。它由 HTMLImports.js 调用polyfill，就在{HTMLImportsLoaded}之后已发送。

但是在正常情况下，因为自定义元素一注册就实例化，所以这两个事件会一个接一个地发生。

时间顺序

1. <link rel=import>.onload() ,
2. {HTMLImportsLoaded}事件，
3. HTMLImports.whenReady()
4. {WebComponentsReady}事件

更多here .