说,我有元素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导入是该组件的“公共接口”的一部分?
答案 0 :(得分:1)
只需导入您直接依赖的元素即可。您可以忽略传递依赖关系,因为无论如何它们都会直接导入到您导入的元素中。
此外,每个元素都应导入<link rel="import" href="../polymer/polymer.html">
。
答案 1 :(得分:0)
方法1是“ 更好 ”方式。每个聚合物元素都应该捆绑自己的依赖关系,因此它在使用时可以自行运行。
方法2不是那么好,你将重新导入元素B的导入两次,这就是浪费带宽,特别是当你没有使用一个函数(如聚合物内置importHref)来检查元素是否有在再次获取之前已经导入。