Question

作为Polymer Starter Kit或Polymer Shop演示，我们在Polymer应用程序中使用延迟加载。这意味着我们有一个基于抽屉的布局，app shell导入抽屉内容以及主页面内容。

现在我们介绍一种行为，并在自定义元素A和B中使用它，其中A显示在抽屉中，B显示在主页面中。现在我们收到浏览器（Chrome）警告，flattenBehaviorsList无法找到行为。

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

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

您怎么看？

提前致谢

Answer 1

我想今天我遇到了同样的问题。当使用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

Answer 2

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

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

例如，请查看以下演示元素，该元素取自Polymer's devguide pages：

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

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

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

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

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

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

延迟加载元素的一个很好的例子是Polymer's Shop应用：source code，online demo。

总结：不要为自定义元素添加延迟加载依赖项，但是懒惰加载元素本身。

在延迟加载的应用部分之间共享行为

2 个答案: