Question

import { LitElement, html } from 'lit-element';

class MyPublic extends LitElement {
  render(){
    return html`
        <p>A paragraph</p>
    `;
  }
}
customElements.define('my-public', MyPublic);

我在MyPublic.js中定义了一个公共Web组件。然后，当我需要在FooComponent.js中使用它时，我将导入MyPublic.js，当我需要在BarComponent.js中使用它时，我也将导入MyPublic.js。这将导致对my-public的重新定义。

如何避免呢？

只需要导入index.js中的所有Web组件，然后就不再导入了吗？

Answer 1

否，这不会导致元素的重新定义，就像浏览器中的最终（实时）JavaScript代码不包含十几个LitElement或Polymer库副本一样。

导入将通过浏览器的运行时进行重复数据删除。这意味着模块中定义的全局变量在内存中也只存在一次，更普遍的说，模块中的自由代码仅执行一次。

您可以阅读有关此in the spec的更多信息。但本质上是：

如果此[import]操作正常完成，则必须是幂等的。每次使用特定的referenceingScriptOrModule调用时，指定符对作为参数，它必须返回相同的Module Record实例。

如何避免在元素重定义中重新定义Web组件？

1 个答案: