Question

我刚刚读到了有关使用HTML导入进行组件封装的信息。

<link rel=import href="import.html">

文件import.html将包含组件所需的所有内容。

一个大问题是：import.html中的Javascript函数和变量成为window命名空间的一部分，这意味着没有任何封装。
碰巧具有相同名称功能的两个不同组件将发生冲突，其中一个功能将被覆盖。

HTML导入是否提供以前不存在的任何形式的javascript封装？

示例：

main.html

<link rel=import href="import1.html">
<link rel=import href="import2.html">

<script>
console.log( moduleFunction() ) ; //`moduleFunction` can be called as if it was defined in the outter document
</script>

import1.html

<script>
function moduleFunction(){
    return 'module1' ;
}
</script>

import2.html

<script>
function moduleFunction(){
    return 'module2' ;
}
</script>

Answer 1

没有。但是，将所有内容包装在函数中或者将所有变量存储在import.html内的全局对象都可以正常工作。

Answer 2

看起来你已经有了答案。

import.html中的Javascript函数和变量成为窗口命名空间的一部分，这意味着没有任何封装。   碰巧具有相同名称功能的两个不同组件将发生冲突，其中一个功能将被覆盖。

HTML导入是否提供以前不存在的任何形式的javascript封装？

spec。

并不多

HTML5 Rocks：

导入中的脚本在包含导入文档的窗口的上下文中执行。所以window.document引用主页文档。

这是not widely supported。

Answer 3

HTML导入是否提供任何形式的javascript封装以前不存在？

不，不是单独使用rel="import"。如果两个单独的HTML文档可能包含<script>元素，其中声明的函数分别具有相同的标识符，则由开发人员将适当的逻辑合并到过程中;并确定将在主window使用哪个标识符。

<link>您可以使用let，try..catch。由于<link>元素是阻止的，请参阅link elements block DOM parsing too，我们使用HTML中<link>的顺序来安排检查标识符的声明。也就是说，moduleFunction应始终从"import1.html"定义，除非要求是对要声明的特定变量实施不同的检查顺序

<script>    
  let moduleFunction;    
  try {
    moduleFunction = function moduleFunction() {
        return 'module1';
    }
  } catch (err) {
    console.error("module 1 error", err)
  }      
</script>

<script>
  moduleFunction = moduleFunction || void 0;
  if (!moduleFunction) {
    try {
      moduleFunction = function moduleFunction() {
        return 'module2';
      }
    } catch (err) {
      console.error("module2 error", err)
    }
  }
</script>

plnkr http://plnkr.co/edit/lzHkc8pydD7q17ldgnrq?p=preview

HTML导入是否提供任何形式的Javascript封装？

3 个答案: