javascript - Web 组件和依赖项隔离

Question

Web 组件真的隔离每个组件内部的依赖关系吗？ 我在同一页面中导入了两个组件，但收到以下错误:

Uncaught TypeError: JSON.stringify is not a function

每个组件单独出现在页面中时都可以正常工作。关于如何解决这个问题有什么想法吗？

谢谢。

Answer 1

它不会隔离依赖关系，并且不会在沙盒 JavaScript 中运行。但是，您可以使用 Web 组件导入来确保您的依赖项仅下载并运行一次:

1) 将导入添加到每个您的 Web 组件 html:

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

2)然后dependency.html应该包含您只需要运行一次的任何脚本:

<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
....

浏览器将仅在页面上下载dependency.html一次，并且仅运行一次。第一次之后它将简单地忽略同一文件的其他导入。

更多信息在这里:

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

<小时/>

更新，如果每个 Web 组件有不同的依赖项:

1) 将所有需要的导入添加到每个您的 Web 组件 html 中:

<link rel="import" href="import-mootools-1.2-core-nc.html" />
<link rel="import" href="import-mootools-1.2-more.html" />

2) 然后导入文件应包含每个脚本，您只需运行一次:

文件import-mootools-1.2-core-nc.html仅包含这一行:

<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>

文件import-mootools-1.2-more.html仅包含这一行:

<script type="text/javascript" src="mootools-1.2-more.js"></script>

注意:如果之后您仍然遇到问题，那么这并不是因为您多次包含依赖项。查看控制台上的“网络”选项卡，您将看到它仅下载一次。您可能还有其他问题。