jQueryを他のライブラリと競合させないための方法

jQuery2011年5月3日

jQueryが別のJavascriptライブラリ（prototype.js等）と同時に読み込まれ、両方のライブラリが$変数を実装していた場合、どちらか片方の関数しか正常に動作しない場合があります。また、競合によるJavascriptエラーも引き起こします。

prototype.jsと競合した場合の解決策

jQuery.noConflict();という関数で解決することが可能です。

HTML

<div id="jquery">
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
<p>テキスト1テキスト1テキスト1テキスト1テキスト1</p>
</div>

Javascript

'jQuery' in window && (function($) {
jQuery.noConflict();
$(document).ready(function(){
$("div#jquery").css("font-weight","bold");
});

document.observe("dom:loaded", function(){
$('prototype').setStyle({
fontSize:"10px"
});
});
})(jQuery);

jQuery.noConflict();を呼び出すと、$変数の制御はそれを最初に実装したほうに戻ります。$変数を開放した後、jQueryにアクセスするにはjQuery変数を使うしかありません。例えば、$("div p")を使っていた場面で、jQuery("div p")を使うことになります。

代替方法（別のショートカットを作成）

	var j = jQuery.noConflict();
j(document).ready(function(){
j("div#hoge").css("font-weight","bold");
});

このように、jQuery.noConflict();を別の変数に格納してしまえば、ショートカットを独自に作成する事ができます。

代替方法（jQuerrをクロージャとしてカプセル化）

	$(document).ready(function(){
jQuery.noConflict();
(function($){
$("div#moge").css("font-weight", "bold");
})(jQuery);
});

実行制御が関数内にある間は、一時的に$変数をjQueryオブジェクトとして使うことが可能になります。関数が終了すると、$変数は最初に制御があったライブラリに戻されます。

※この方法を使う場合、$を必要とするカプセル化された関数内で他のライブラリの関数を使うことは不可能になります

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。