`HTMLImports.whenReady`和`window.addEventListener（'WebComponentsReady'，function（e）{`之间有什么区别？ [英] What is the difference between `HTMLImports.whenReady` and `window.addEventListener('WebComponentsReady', function(e) {`

问题描述

HTMLImports.whenReady 和之间的区别window.addEventListener（'WebComponentsReady'，function（e）{？

Polymer的官方文档说：

要在主HTML文档中定义元素，从HTMLImports.whenReady（回调）中定义元素。当文档中的所有导入都加载完成后调用callback。

"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关于进口的官方文件说：

在本地导入下，主文档中的标记会阻止导入的加载。这是为了确保导入已加载并且其中的任何已注册元素都已升级。这种原生行为很难实现polyfil l所以HTML Imports polyfill不会尝试。相反，WebComponentsReady事件代表了这种行为：

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:

这两者有什么区别？

推荐答案

它们几乎 *相同：两者都是同时触发的。

They are almost * the same: both are triggered at the same time.

因此，您可以在回调和事件之间选择自己喜欢的风格。

So you can choose your favourite flavor between callback and Event.

Nota Bene ：如果由于某些原因，你单独引用 CustomElement.js polyfill（即没有 HTMLImports.js 功能），只会抛出 WebComponentsReady 事件。

Nota Bene: if, for some reasons, you reference the CustomElement.js polyfill alone (i.e. without the HTMLImports.js feature), only the WebComponentsReady event will be thrown.

（我更喜欢使用事件处理程序，因为在第一种情况下你需要确定<$ c已定义$ c> HTMLImports ，因为它是唯一记录的API 此处）

(I prefer to use the Event Handler because in the first case you need to be sure the HTMLImports is defined, and because it is the only documented API here)

*：当然他们是不同的！差异在引用的定义中说明。

*: Of course they are different! The difference is stated in the quoted definitions.

• 后者正在等待自定义元素进行实例化。它由 CustomElement.js polyfill触发。


• 第一个是等待导入加载和解析。 HTMLImports.js polyfill，在 {HTMLImportsLoaded} 发送完成后调用。

• The latter is waiting for the Custom Elements to be instanciated. It is triggered by CustomElement.js polyfill.
• The first is waiting only for the Imports to be loaded and parsed. It is called by HTMLImports.js polyfill, just after {HTMLImportsLoaded} has been sent.

然而在正常情况下，因为自定义元素在注册后立即被实例化，所以2个事件将一个接一个地发生。

However in normal situation, because Custom Elements are instanciated as soon as they are registered, the 2 events will happen one after the other.

按时间顺序排列

1. < link rel = import> .onload（），


2. {HTMLImportsLoaded} event，


3. HTMLImports.whenReady（）


4. {WebComponentsReady} 活动

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

更多此处 。

这篇关于`HTMLImports.whenReady`和`window.addEventListener（'WebComponentsReady'，function（e）{`之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！