例えば,ある公開中の顧客のサイトで何かのPluginを動かしたいとする.そのPluginはjQuery1.9.1以降であれば動作するが,それ未満であった場合,動作しないことが確認されている.しかし,顧客のサイトはjQuery1.2.6が導入されており,そこですでに使用されているPluginはjQuery1.9.1では動作しないことがわかっている.次の場合,単純にjQuery1.9.1をjQuery1.2.6が読み込まれた後に読み込むと,jQuery1.9.1になってしまう.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
alert($().jquery); // 1.9.1
</script>
</head>
</html>
サンプルファイルDL : sample1.html
この場合,jQueryの共存を行うことが出来れば,ベストな解であるといえる.その方法は次のコードを導入することで,これを可能とする.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery1_9_1 = jQuery.noConflict(true);
alert($().jquery); // 1.2.6
alert(jQuery1_9_1().jquery); // 1.9.1
</script>
</head>
</html>
サンプルファイルDL : sample2.html
さて,これによって,jQueryが1.2.6と1.9.1の共存した状態になる.つまり,jQuery1.9.1の$関数をjQuery1_9_1関数に書き換えたようなイメージになる.このような場合,それぞれのVersionで動かすためにはjQuery1.2.6ならば$関数を用いて,jQuery1.9.1ならば$関数の代わりにjQuery.noConflict()関数で$関数の代わりに定義したjQuery1_9_1関数(?)を用いれば良い.しかし,このままではjQuery1.9.1を使う場合,通常ならば$(hogehoge)と書くところをjQuery1_9_1(hogehoge)と書かなければならないので,無名関数を用いてjQuery1.9.1でも$(hogehoge)とかけるようにすることができる.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery1_9_1 = jQuery.noConflict(true);
(function($){
alert($().jquery); // 1.2.6
})(jQuery);
(function($){
alert($().jquery); // 1.9.1
})(jQuery1_9_1);
</script>
</head>
</html>
サンプルファイルDL : sample3.html
ある関数はjQuery1.2.6で,ある関数はjQuery1.9.1で,それぞれを定義後,自由な位置で呼び出したい場合がある.これは連想配列内でそれぞれの定義を書けば,無名関数外でも,その関数を指定したjQueryのVersionで動かすことができる.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery1_9_1 = jQuery.noConflict(true);
(function($){
a191 = {
b : function(){
return $().jquery;
}
}
})(jQuery1_9_1);
(function($){
a126 = {
b : function(){
return $().jquery;
}
}
})(jQuery);
alert(a191.b()); // 1.9.1
alert(a126.b()); // 1.2.6
</script>
</head>
</html>
サンプルファイルDL : sample4.html
補足:無名関数とはこのような関数である.
<html>
<head>
<script type="text/javascript">
alert(
(function(a){
return a;
})("aに入る値")
);
</script>
</head>
</html>
サンプルファイルDL : sample5.html
この無名関数を理解すると,$関数がなぜ無名関数を使うと jQuery1.2.6 が jQuery1.9.1 に変わったのかが良く分かる.
0 件のコメント:
コメントを投稿