sharedhat

通常どうしても、MootoolsとjQueryを両方利用しなければならない場合、jQueryのnoConflict()メソッドで
コンフリクト(conflict)を避けるような記述をしなければなりませんでした。
今回はjQueryのnoConflict()を使用してなくても、両方使用できる方法について書きます。

今までの方法

今までMootoolsとjQueryを共存させる場合、jQuery.noConflict()を利用して実現していました。
たとえばこんな感じです。

	jQuery.noConflict();

この場合、jQueryを使用したり、$jなどの別なショートカットに割り当てる必要がありました。

別のショートカットに割り当てる場合

	//ライブラリの衝突を避ける
	jQuery.noConflict();

	//$jをショートカットにする
	var $j = jQuery;

	//jQueryコードの記述
	$j(function(){

		$j("#open").click(function(e) {
			alert("click");
		});

	});

jQueryを使用する場合

	//ライブラリの衝突を避ける
	jQuery.noConflict();

	//jQueryコードの記述
	jQuery(function() {

		jQuery("#open").click(function(e) {
			alert("click");
		});

	});

この方法では$が使えないので、ソースコードが長くなったり、jQueryのプラグインが動作しなかったりいろいろ面倒でした。
これを解決するにはどうすればよいでしょうか?
これはMootoolsの$ Safe Modeを使用することで解決できます。

$ Safe Modeの使い方

$ Safe Modeの使い方は簡単です。
$を無名関数の引数にして、ローカル変数として使用します。
具体的にはこんなかんじになります。

1. お行儀よくモジュール化する。

(function(){}())で完全にモジュール化します。
function(){}の関数定義の後に()をつけているので、
関数定義が完了した時に、この関数が実行されることになります。

(function() {

}());

2. document.idと$を使用する

引数にdocument.idと$を追加します。
document.idは$と同じです。
つまり、$(“open”)とdocument.id(“open”)はまったく同じ動作になります。

(function($) {

}(document.id));

最終的にはこんな感じになります。

(function($) {

	//$はこの関数内でのローカルな変数。
	//なので他に影響がない。
	window.addEvent("domready", function() {

		$("open").addEvent("click", function(event) {
			alert("On Click!!");
		});

	});

}(document.id));

$ Safe ModeについてはMootoolsのオフィシャルブログの記事を参考にしてください。

The Dollar Safe Mode
http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

jQueryとMootoolsのコードを記述する

1. MootoolsとjQueryの読み込み

読み込み順はどちらが先でもOKです。
Mootoolsを先に読み込んでも、jQueryを先に読み込んでも問題なく動作します。

<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<script type="text/javascript" src="../js/mootools-1.2.4-core.js"></script>

もしくは、次のような感じです。

<script type="text/javascript" src="../js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="js/jquery1.4.2.js"></script>

2. コードの記述

(function($) {

	window.addEvent("domready", function() {

		$("open1").addEvent("click", function(event) {
			alert("click");
		});

	});

}(document.id));

$(function() {

	$("#open2").click(function(e) {
		alert("click");
	});

});

これで問題なく動作するはずです。
今回、掲載したものではないですが、実際に動作確認をしたサンプルがあるので、そちらを確認してください。
サンプルでは、SexyLightBox(Mootools Plugin)とLightbox(jQuery Plugin)を使用しています。

jQueryを先に読み込む場合
http://holyshared.github.com/mootools-example/jquery/jquery-first.html

Mootoolsを先に読み込む場合
http://holyshared.github.com/mootools-example/jquery/mootools-first.html

以上で終了です。
参考になりましたでしょうか?

Trackback:

It is a comment that has been gotten before.

トラックバックを下記のURLに送ってください。
http://sharedhat.com/blog/943/trackback/

Reply:

Please give the comment to this article.





this site is licensed under a Creative Commons License But, a part of contents is excluded.
Powered by WordPress