ES6模块与HTML导入

Question

HTML Imports是Web Components规范的一部分,它提供了一种处理Web依赖关系的方法.ES6模块也做同样的事情,但仅适用于Javascript代码.

关于这两者如何协同工作是否有任何明确性？

编辑:一个例子:在我最近的一个项目中,我有两个Javascript组件(文件),其中一个依赖于另一个,但任何HTML代码(这是另一个组件)都可以使用它们中的任何一个.因此,当我在HTML中包含依赖脚本时,我也不想包含父脚本(避免手动依赖性处理).似乎没有明确的方法来实现它,除了将ES6模块与脚本包括混合.我看到的唯一选择是为每个组件维护一个单独的文件,并指定所需的文件和依赖项,例如component.io.

Answer 1

Web组件如何与ES6模块交互尚未最终确定,但至少有两个选项.

ES6具有领域的概念.如果您在两个iFrame中使用JavaScript,则两个iFrame可以相互通信并来回传递数据.但他们处于不同的领域.这意味着您可以Array.prototype在不影响另一个的情况下修改对象.每个Web组件很可能都有自己的领域,因此它们不会相互干扰.

每个领域都有一堆全局对象,其中包括(很可能,规范尚未最终确定)Loader对象.您可以创建a的新实例Loader并使用它来加载模块.领域中已存在一个,这是默认领域.每个Loader实例都有自己定义的模块列表,因此每个Web组件都可以给它自己的Loader实例.

我不确定webcomponents是否会被赋予不同Realms或不同的Loader对象,但不同的Web组件很可能无法相互干扰.

Answer 2

以下是最新消息:Chrome已对所有4个Web组件规范提供原生支持,而Mozilla 宣布他们将不会发布 HTML Imports的实现,因为这与ES6模块的待解决方案正在进行中,这不会很快得到解决,特别是因为这是Mozilla对它的评价:

我们希望一旦JavaScript模块 - 一个源自开发人员社区编写的JavaScript库的功能 - 出货,我们对这个问题的看法就会发生变化.我们还从Gaia和其他人那里了解到,缺少HTML Imports不是问题,因为如果需要,可以使用polyfill轻松提供功能.

`