0

目前，我面临一些关于重复引用 3rd-party 库的严重问题，这会导致一些库出现故障。

这是第一个自定义元素。

<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-menu">
    <script>
        Polymer({
            is: "jquery-ui-menu"
        });
    </script>
</dom-module>

这是另一个元素。

<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/jquery-ui/jquery-ui.js"></script>
<dom-module id="jquery-ui-popup">
    <script>
        Polymer({
            is: "jquery-ui-popup"
        });
    </script>
</dom-module>

如您所见，这两个脚本标记都引用位于同一路径中的 jQuery。通常，浏览器应该加载 jQuery 2 次，这会导致一些严重的问题，如下面的代码。

当第二次加载 jQuery 时，所有注册的事件都将被清除。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
    $(window).on('test', function (){alert('test!');});
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
    $(window).trigger('test');
</script>

http://jsfiddle.net/sry1shpt/

我认为这不是 jQuery 或任何其他第三方库的错误。但这是聚合物的一个严重问题。允许元素加载重复脚本完全是胡说八道。

你有什么实用的方法来解决这个问题吗？

请记住，这两个元素的源代码可能位于不同的存储库中，并且不应该相互了解。

谢谢，

4

1 回答 1

0

您可以将<script>标签放入单独的 HTML 文件（即jquery-scripts.html）并在两个自定义元素中使用 HTML 导入：

<link rel="import" href="jquery-scripts.html">

HTML 导入是重复jquery-scripts.html的，因此 jquery 库只会被导入一次。

于 2015-08-07T08:35:58.143 回答