jQueryとjQuery拡張を必要とする複数のポートレットを編成する方法は？

Question

私はLiferay 6.2用のいくつかのポートレットを開発しており、いくつかの拡張機能とともにjQueryを使用することを選択しました。

私が必要とする拡張機能が、自分がポートレットで使用しているものではないjQueryインスタンスに自分自身をアタッチしているところで問題が発生しているようです。だから、私がエクステンションを利用するときは利用できません。

私のコードは次のようになります。 liferay-portlet.xmlは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> 

で

<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> 

が含まれています、私はわからないんだけど、私は、DatePickerの機能が異なるjQueryのインスタンスに接続されますと思います。デバッガには、異なるポートレットがロードしている約7つのjQueryインスタンスと3つのjQueryUIインスタンスがリストされています。

いくつかの調査の末、テーマにすべてのJSライブラリをロードしようとしましたが、一部のポートレットはテーマの前に読み込まれました。私たちの現在の試みは、それらを 'フック'にロードすることです。それはまだ進行中です。

現時点では、すべてのポートレットを自分で作成しています。将来的には第三者のポートレットを使用して、最良の方法が何であるか疑問に思うかもしれません。

EDIT

以下の答えとHow to resolve two jquery conflict? は、複数のjQuerysがロードされたときに、競合を避ける方法を示しています。 Liferayポートレット開発では、このベストプラクティスですか？私は、異なるjQueryバージョンを必要とすることは避けられない時代だと考えていますが、各ポートレットがjQueryの独自のコピーを単純にロードするのは普通ですか？

Answer 1

$CAL = jQueryです。 スクリプトの残りの部分で使用する代わりにjQueryの異なるエイリアスを作成しますjQuery.noConflict()

を参照する変数として$CALを定義します。

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>