进口聚合物最佳实践

时间:2016-09-29 21:13:04

标签: polymer polymer-1.0

我已经看到这在入门套件中来回徘徊,我想知道导入元素凉亭元素的最佳做法是什么?

每个元素应该减少相同的bower包吗?或者是否应该只有一个导入所有凉亭元素的html表?

另外,为什么<link rel="import" href="../bower_components/polymer/polymer.html">始终在每个元素中导入?

示例 - 每个元素都会导入它自己的元素,有时会减少(其他元素也可以导入它们):

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="my-view1">

或者导入所有元素的html表格:

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../bower_components/google-map/google-map-directions.html">


<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">

2 个答案:

答案 0 :(得分:3)

我相信随着2016年I /)2016宣布的PPL模式的建立,以及Polymer构建机制,Polymer CLI推出了一个基本结构。

我的工作取决于我是在尝试构建可重用元素还是只构建一个可重用的组件。在一个可重复使用的alement中,我总是导入polymer以及我在元素中使用的那些元素。我通过../import-element/import-element.html

引用了所有内容

使用我自己的应用程序,我有一个规则试图通过this.importHref延迟加载所有内容,除了在该元素最初加载时将显示的内容。我为包含iron-pages的元素构建了一个行为,因此支持它。在这种情况下,我导入polymer,最初将显示的任何元素。我不导入其余的

html导入是由Polymer去掉的,所以如果你尝试多次加载东西并不重要,它们只会加载一次。

在这种情况下,我使用绝对网址/bower_components/import-element/import-element.html引用了bower组件元素,并在我的应用中使用相对网址引用了这些元素。我目前将我的应用程序的所有自定义元素存储在同一目录中,因此为了引用它们,我只使用import-element.html。我认为这最后一段是接受的做法,但我发现更容易不必有效地将两个物理目录映射到同一个URL。

答案 1 :(得分:1)

TL; DR;

我还没有出现那种可靠的最佳实践。

更长时间阅读

我个人认为,导入链接通常不是一个好主意,因为捆绑时会遇到麻烦。除非您想捆绑整个应用程序,否则导入&#39;位置并不重要。

您可能想要捆绑相关元素。例如,可能有<app-page-admin-panel> m <app-page-user-profile>等等。每次首次需要时,它们都可能是延迟加载的。捆绑的HTML导入无法为您提供AFAIK的灵活性。

如果捆绑所有内容,当然没有什么可以延迟加载。

如果为按需加载的每个元素创建一个包是向前迈出的一步,那么常见元素呢?如果管理面板和用户个人资料元素都导入<paper-button>,您是否会将其包含在每个捆绑中?这可能是安全的,虽然浪费了带宽。但是,聚合物本身不能多次导入。因此,在每个元素中导入它可能不是一个好主意。

可能的未来解决方案 - ES6模块导入

我个人非常希望ES6进口。使用import "polymer"您是安全的,因为捆绑或不捆绑,模块加载器(以及将来的浏览器)将保证您只能导入一次。您可能希望看到我对其他问题的回答:Modules in Polymer