2

我刚刚阅读了有关使用 HTML 导入进行组件封装的内容。

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

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

但是，一个大问题：内部的 Javascript 函数和变量import.html成为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>
4

3 回答 3

1

不，但是，将所有内容包装在一个函数中或拥有一个将所有变量存储在内部的全局对象都import.html可以。

于 2017-10-22T02:25:35.427 回答
0

看起来你已经有了答案。

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

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

没有太多的规范。

HTML5 摇滚：

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

这没有得到广泛支持。

于 2017-10-22T02:56:46.513 回答
0

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

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

<link>您可以使用let, try..catch。由于<link>元素是阻塞的，请参阅链接元素也阻塞 DOM 解析，我们使用<link>HTML 中的顺序来安排对标识符声明的检查。也就是说，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

于 2017-10-22T03:22:39.103 回答