4

HTMLImports.whenReady 和 和有什么不一样window.addEventListener('WebComponentsReady', function(e) {？

Polymer 的官方文档说：

“要在主 HTML 文档中定义元素，请从 HTMLImports.whenReady(callback) 中定义元素。当文档中的所有导入完成加载时调用回调。”

Webcomponents.org 关于导入的官方文档说：

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

两者有什么区别？

4

1 回答 1

5

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

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

注意事项：如果由于某些原因，您单独引用了polyfillCustomElement.js（即没有该HTMLImports.js功能），则只会WebComponentsReady抛出事件。

（我更喜欢使用，Event Handler因为在第一种情况下，您需要确保HTMLImports已定义，并且因为它是此处唯一记录在案的 API ）

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

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

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

时间顺序

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

更多在这里。

于 2016-05-04T15:30:23.230 回答