如何组织多个需要 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>

我不确定，但我认为日期选择器函数附加到不同的 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>

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

How to organise multiple portlets which require jQuery and jQuery extensions?

javascript

jquery

jquery-ui

jquery-plugins

liferay-6