使用Polymer元素进行html导入的正确方法?

时间:2016-01-26 02:33:02

标签: polymer web-component

说,我有元素A和B.B中的导入是:

<!-- Imports in B -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">

现在我想在A中使用B.导入B的“正确”方式是什么? A应该像这样导入B吗?

<!-- Imports in A: Method 1 -->
<link rel="import" href="../element-b/element-b.html">

或者A还应该导入B使用的所有导入,如下所示?

<!-- Imports in A: Method 2 -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">
<link rel="import" href="../element-b/element-b.html">

如果谷歌自己的聚合物元素可以提供任何指导,答案似乎是方法2,即导入所有相关的htmls。但如果是这种情况,Polymer / WebComponents中的“import”语法似乎打破了封装,没有明显的原因。例如,这是Polymer的“paper-dropdown-menu”元素:

https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html

它导入“paper-input.html”,它有自己的导入:

https://github.com/PolymerElements/paper-input/blob/master/paper-input.html

以下2个导入用于两个元素:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

如果paper-dropdown-menu.html已导入paper-input.html,为什么paper-downdown-menu必须再次导入polymer.html和iron-form-element?这样做的问题是,在编写具有许多元素的应用程序时,导入可能会非常快速地失控。是的,我知道硫化。但是我没有看到当创建或使用元素时,这对开发过程有何帮助。另外,封装装置A在上面的例子中不需要知道B的内部部分。或者,Polymer / Webcomponent是否真的说组件中的html导入是该组件的“公共接口”的一部分?

2 个答案:

答案 0 :(得分:1)

只需导入您直接依赖的元素即可。您可以忽略传递依赖关系,因为无论如何它们都会直接导入到您导入的元素中。 此外,每个元素都应导入<link rel="import" href="../polymer/polymer.html">

答案 1 :(得分:0)

方法1是“ 更好 ”方式。每个聚合物元素都应该捆绑自己的依赖关系,因此它在使用时可以自行运行。

方法2不是那么好,你将重新导入元素B的导入两次,这就是浪费带宽,特别是当你没有使用一个函数(如聚合物内置importHref)来检查元素是否有在再次获取之前已经导入。