在聚合物定制元素中引用第三方JS库的最佳实践是什么？

Question

目前，我面临着一些严重的问题，重复引用第三方图书馆，导致一些图书馆故障。

这是第一个自定义元素。

<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。通常，浏览器应该加载2次jQuery，这会导致一些严重的问题，如下面的代码。

当第二次加载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或任何其他第三方库的错误。但这是一个严重的聚合物问题。允许元素加载复制脚本完全是胡说八道。

你有什么切实可行的办法来解决这个问题吗？

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

谢谢，

Answer 1

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

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

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