javascript - 如何组织多个需要 jQuery 和 jQuery 扩展的 portlet？

Question

我正在为 Liferay 6.2 开发一些 portlet，并选择使用 jQuery 以及一些扩展。

我似乎遇到了问题，我需要的扩展将自身附加到一个 jQuery 实例，而该实例不是我在 portlet 中使用的实例。因此，当我开始使用扩展时，它不可用。

我的代码看起来像这样。 liferay-portlet.xml 包含

    <header-portlet-javascript>/js/jquery-1.12.2.min.js</header-portlet-javascript>
    <header-portlet-javascript>/js/jquery-ui.min.js</header-portlet-javascript>
    <header-portlet-javascript>/js/datepicker-de.js</header-portlet-javascript>
    <header-portlet-javascript>/js/calendar.js</header-portlet-javascript>

在 JSP 中

<script type="text/javascript">
var $CAL; 
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
    $CAL = jQuery; // create my own jQuery handle

    ...

    $CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
    // $CAL.datepicker is NULL !
});
</script>

我不确定，但我认为 datepicker 函数会附加到不同的 jQuery 实例。调试器列出了不同 portlet 正在加载的大约 7 个 jQuery 实例和 3 个 jQueryUI 实例。

经过一番研究，我们尝试加载主题中的所有 JS 库，但有些 portlet 是在主题之前加载的。我们当前的尝试是将它们加载到“钩子(Hook)”中。该事件仍在继续。

目前我们正在自己创建所有 portlet。将来我们可能想要使用第 3 方 portlet，所以我想知道最好的方法是什么。

编辑

下面的答案和How to resolve two jquery conflict?展示如何在加载多个 jQuery 时避免冲突。这是 Liferay portlet 开发的最佳实践吗？我认为有时需要不同的 jQuery 版本是不可避免的，但是每个 portlet 简单地加载自己的 jQuery 副本是否正常？

Answer 1

$CAL = jQuery就是问题所在。将 $CAL 定义为变量引用 jQuery.noConflict()

Create a different alias instead of jQuery to use in the rest of the script.

var j = jQuery.noConflict();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
  $CAL = jQuery.noConflict();
  $CAL(document).ready(function() {
    $CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
    
    console.log("jQuery version ", $CAL().jquery);
    $CAL("body").datepicker("dialog", "10/14/2016");
  });
</script>