2

正如 Polymer Starter Kit 或 Polymer Shop 所展示的，我们在 Polymer 应用程序中使用了延迟加载。这意味着我们有一个基于抽屉的布局，并且应用程序外壳会导入抽屉内容以及主页内容。

现在我们引入一个行为并在自定义元素 A 和 B 中使用它，其中 A 显示在抽屉中，B 显示在主页中。现在的情况是我们收到浏览器 (Chrome) 警告，flattenBehaviorsList但无法找到该行为。

我们假设发生这种情况是因为主页的Polymer.importHref调用（选项async是）识别行为（在自定义元素 B 中）并将其导入添加到 HTML 导入映射。true但在导入内容之前，抽屉的Polymer.importHref(option asyncis true) 调用想要导入自定义元素 A 的行为并从 HTML 导入映射中获取内容。但由于导入未完成，行为是null.

这个假设是真的吗？如果是的话，这是否是 Chrome 中的一个错误——只是一个想法，因为 Firefox 似乎可以处理这个问题？或者它是糟糕的设计，我们不应该在不同的延迟加载应用程序部分共享相同的行为？

你怎么看？

提前致谢

4

2 回答 2

2

我想我今天也遇到了同样的问题。使用 importHref async 时，我会收到类似的错误[paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import，但是当我更改为 async = false 时，错误消息就消失了。

看来这是 Polymer 的一个已知错误，或者可能是 Chrome https://github.com/Polymer/polymer/issues/2522

于 2017-01-07T15:13:48.643 回答
0

延迟加载是加载资源的首选方式，您不需要立即加载。但是你必须做对，我稍后会解释。

在单独的文件中拥有一个行为并在多个自定义元素中重复使用它也是非常正常的，甚至是鼓励的。但是，自定义组件需要的所有资源都必须作为正常 rel="import"加载，这意味着不能async设置anddefer标志。

例如，看看下面的演示元素，取自Polymer 的开发指南页面：

<link rel="import" href="highlight-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [HighlightBehavior]
  });
</script>

如您所见，该行为是作为依赖项导入的。没有它，很可能会出现错误，就像您的情况一样。

现在是有趣的部分 - 延迟加载。在这里，您实际上并没有加载组件使用的所有内容。所以你必须很清楚哪些资源可以，哪些资源不能懒加载。根据经验，您必须直接在组件内加载您使用/实例化的所有内容。

一些常见的延迟加载示例：

  • 如果您有一个iron-pages元素并且所有页面都是自定义元素，那么您应该只加载默认（第一个）页面，因为其他页面不会立即使用。
  • 您可以将非必要的 GUI 元素（例如滑出侧边栏）放在 a中，并在所有组件都延迟加载后dom-if渲染它。dom-if最简单的方法是使用importHref。

延迟加载元素的一个很好的例子是 Polymer's Shop 应用程序：源代码、在线演示。

总结：不要延迟加载自定义元素的必备依赖项，而是延迟加载元素本身。

于 2017-01-05T16:42:45.283 回答