jQuery.noConflict()は使わなくても大丈夫
Category: blog
通常どうしても、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
以上で終了です。
参考になりましたでしょうか?
Related Post:
It is a list of related articles.
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.