在延迟加载的应用程序部件之间共享行为答案

【问题标题】：Sharing behavior between lazy loaded app parts在延迟加载的应用程序部件之间共享行为
【发布时间】：2017-05-20 02:49:42
【问题描述】：

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

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

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

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

你怎么看？

提前致谢

【问题讨论】：

标签： polymer lazy-loading web-component behavior html-imports

【解决方案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

【讨论】：

【解决方案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。

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

【讨论】：

感谢您的解释。它符合我的假设，即延迟加载并不像使用asyncflag 那样简单。正如您所说，在 Polymer Shop 中，他们演示了何时急切加载资源，即。 e. shop shell 中的shop-home.htmlfile 因为home 路由是默认路由。但是，如果有人想将指向文章列表的链接转发给某人，而接收者因此跳过了默认路由，会发生什么？
正确，当您深层链接到非默认页面时，您就会遇到“问题”。如果你看一下_pageChanged方法中的shop-app.html，你会看到他们在路由更改时导入页面，这实际上解决了这个问题。另请注意，此导入几乎是即时的，因为服务工作者很可能已经缓存了它（用户第一次打开深度链接页面时除外）。
我的场景如下：shell包含一个iron-pages作为主要内容和一个sidebar元素。 sidebar 本身也包含一个iron-pages。通过这种方式，我为用户提供了查看器和编辑器。在iron-pages 中，我使用importHref（带有async 标志）来加载viewer-page.html 和viewer-sidebar.html，以及编辑器元素。两个部分中的元素都急切地加载所有资源，其中一些共享行为。现在我想知道是否有两个工作人员正在加载页面和侧边栏，以及是否可能存在关于 HTML 导入地图的竞争条件。
浏览器会自动为你去重请求，所以你不用担心一个资源会被多次抓取。您可以安全地将它包含在您需要的任何地方。例如，所有自定义组件都引用polymer.html 导入，浏览器只加载一次。这也适用于 async 导入。
很高兴知道重复数据删除发生了，这不是我担心的方面。或者，它是。让我解释一下：两个工作人员正在异步加载页面部分（主要，侧边栏）。工人 A 偶然发现了 my-behavior.html 导入，然后将相应的条目放入 HTML 导入映射并开始加载。与此同时，工人 B 也得到了 my-behavior.html 的导入语句，在地图中查找它，找到它，读取它的值，BOOM 得到 undefined。那可能吗？同一个 Polymer 应用程序在 Chrome 中引发 _flattenBehaviorsList 警告，但在 FF 中有效。