THE HAM MEDIA BLOG

jQueryとprototypeを同時に使う方法時の読みこむ順番と違い

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
Prototype
jquery

同時に使う方法時の読みこむ順番と違い

前回のエントリー (jQueryとprototypeを同時に使う方法時のjQueryの書き方あれこれ)
で、jQueryとprototypeを同時に使う方法時のことを書いたのですが
コメントにこれまたcyokodogさんからアドバイスをいただきました。
さらに、MIYAさんも、
共存方法についてのことを書いていたのですが、そこでふとした疑問が…
あれ?オイラのブログとライブラリの読み込んでいる順番ちがうけど、
何か違いでるのかな・・・?

ちょっと実験してみた!



ここのブログでの順番

一緒に使いたいというわけではないですが、自然と一緒になってしまったライブラリ。
ここのブログでの読み込みは
jQuery → prototype
という順になっているのですが、

1.最初にprototype.jsを読み込ませます。
  ※prototype.jsで動かすプラグインも先に記述。
2.jQueryを読み込ませます。

jQueryとprototype.jsを共存させる方法 | CSS Lecture

・・・えっ?

あれ?

もうこの時点でアウトだ・・・
ってことではなく、ちゃんと動作している。
スクリプトの書き方にもよると思うのですが、読み込みの順などでも
その動作が違う様子。

動作テストで使ったスクリプト

■スクリプト

jQuery.noConflict();

window.onload = function(){
	$('testb2').onclick = function(){
		alert('click!')
	}
};

(function($){
$(function(){
    $('#testb2').click(function(){
        $('#test2 p').slideToggle();
    });
});
})(jQuery);

jQuery(function($){
    $(function(){
        $('#test2').hover(function(){
			$(this).css('background-color', '#ff0000')
		},function(){
			$(this).css('background-color', '#ffffff')}
        )
    });
});

■プレビュー

ここが隠れたり出たり・・・しないときも?

頭にjQuery.noConflict();を入れた例をだしましたが、
それを抜いた例も含めて、ちゃんと動作するか。
上手くプレビュー作れなかったので、とりあえず実験結果まとめます。

ライブラリの読み込む順番とその影響

ライブラリを読み込む順番とエラーがでるかどうかをチェックした。

ライブラリとスクリプトを読み込む位置

  • 1.prototype → jQuery → script
  • 2.jQuery → prototype → script
  • 3.jQuery → script → prototype

今回はこの3つをチェック。
scriptは先ほどのものをjQuery.noConflict();ありとなしでチェック。

実験とその結果

順番 noConflictあり noConflictなし
1.prototype → jQuery → script エラー1
2.jQuery → prototype → script エラー2
3.jQuery → script → prototype

実験の結果は上の表の通りです。
ライブラリが読み込まれるタイミングと
スクリプトのタイミングとでnoConflictが必要な場合と
そうでない場合があるようです。

ちなみに、エラー1ではjQuery側のスクリプトに、
エラー2ではprototype側のスクリプトにエラーがでました。

しかし、今回のスクリプトだからこその結果なので、
本来ならnoConflict()のあるなし関わらず、
もっと動かないケースが多いと思われます。

また、今回はスクリプトの頭部分にnoConflictを入れたのですが、
noConflictのつけ方次第ではエラーもでない可能性はあるので、
それはまた実験してみようと思います。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。