Prototyperに贈るjQuerystからの手紙

今回の想定する対象者

今回の想定する対象者

「Prototype.jsは使うけど、jQueryは微妙なPG」

内容

内容

先に

先に

別にどっちがいいという話ではないです。

向き不向きはありますが、どちらもフレームワークとしての完成度は高いです。（Prototype.jsも1.6.0でDOM Readyサポートしたし）

先に

具体的には以下のような使い分けがおすすめ

Prototype.jsとjQueryの差異

Prototype.jsとjQueryの差異（Prototype.js）

Prototype.jsとjQueryの差異（jQuery）

ロジック中心、DOM中心

ロジック中心、DOM中心

Prototype.jsは配列、ハッシュ、オブジェクト、

数値、文字列等を使ってロジック中心に考えるのに対し、

jQueryはelements、class、id、events等のDOMを中心に考える。

インターフェイス

インターフェイス

Prototype.js（既存言語風インターフェイス） 
	var div = document.getElementsByTagName('div');
	$A(div).each(function (elem) {
		elem.setStyle({opacity: 0.5});
	});
	// 最近は$$('div').each(function (elem) {
	//	elem.setStyle({opacity: 0.5});
	// });みたいに書ける

インターフェイス

jQuery（流れるようなインターフェース（fluent interface）） 
	$('div').css({opacity: 0.5});
	// divの集合に対してcssの変更を行う

ライブラリの混在

ライブラリの混在

コードのまとめ方

コードのまとめ方

基本オブジェクト

基本オブジェクト

jQueryの考え方

jQueryの考え方


DOM版SQL


JSの中にjQueryが入っているのではなく、jQueryのDSLとしてJSを使う

jQueryの考え方

とにかくDOMを基準に考える

条件分岐

条件分岐

#loginがあったら何かする（ログインしてるかの判断とか）
× 
	var hoge = $('#login');
	if (hoge.length) alert('hoge');
○（イメージ） 
	$('#login').each(function () { alert('hoge') });

繰り返し

繰り返し

3個の要素になんかする処理をする
× 
	$('#hoge1, #hoge2, #hoge3').each(function () {
		$(this).click(function () { alert('hoge'); });
	});
○ 
	$('#hoge1, #hoge2, #hoge3').click(function () { alert('hoge'); });

状態保持

状態保持

× 
	var clicked;
	$('#hoge1').click(function () { clicked = true; });
	if (clicked) alert('true');
○ 
	$('#hoge1').click(function () { $(this).addClass('clicked'); });
	$('#hoge1.clicked').each(function () { alert('true'); });

局所化

局所化

× 
	var hoge = function () {};
	hoge.prototype = {
		// hogehoge
	};
○ 
	$.fn.hoge = function () {
		// hogehoge
	};

よりよいjQueryの使い方

よりよいjQueryの使い方

変数、条件分岐、繰り返しの排除

変数、条件分岐、繰り返しの排除

jQuery基準で考える

jQuery基準で考える

とにかくPlugin化

とにかくPlugin化


以上　ご静聴ありがとうございました