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

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

本文关键字：jQuery 扩展 portlet 何组织      更新时间：2023-09-26

我正在为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>

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

经过一番研究，我们尝试在主题中加载所有JS库，但有些portlet在主题之前加载。我们目前的尝试是将它们加载到一个"钩子"中。

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

编辑

下面的答案和如何解决两个jquery冲突?演示如何在加载多个jquery时避免冲突。这是portlet开发中的最佳实践吗?我认为需要不同的jQuery版本是不可避免的，但是每个portlet简单地加载自己的jQuery副本正常吗?

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

创建一个不同的别名，而不是jQuery，在其余部分使用脚本。

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>

相关文章：