jQueryのコードを良くする5つのTIPS

このエントリーをはてなブックマークに追加

5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。

DOM中にデータを保存できるdataメソッドを使おう

$('selector').attr('alt', 'this is the data that I am storing');
 // then later getting that data with
$('selector').attr('alt');

「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。

$('selector').data('meaningfllname', 'this is the data I am storing');
 // then later getting the data with
 $('selector').data('meaningfullname');

変わりにjQueryのdataメソッドを利用しよう。これはページの要素としてデータを関連付けることが出来る。

※補足(to-R)

dataメソッドはDOM要素にデータをストレージしておく為のメソッドです。

サンプル

サンプルではbody要素にmeaningfullnameと言う名前で、データを保存しておき、ボタンがクリックされた際に取得しています。

jQueryのセレクタを活用しよう

jQueryにはたくさんのセレクタがある。CSSセレクタだけではなくjQueryのオリジナルセレクタも多用しよう。

よく利用するのは以下のセレクタです。

:input

例::inputはページ内のinput要素、select要素、textarea要素などを指定できます。

[attribute=value]

例:input[name='container']はname属性の値がcontainerのinput要素

:eq(index)

例:table:eq(3)はページで4個目のtable要素

たくさんのDOMを操作する場合はlivequeryプラグインを利用しよう

livequeryプラグインを利用すると、あとで追加する予定の要素に対してイベントをバインドしておくことが出来ます。

$('div.edit').livequery('click', function(){
//go into edit mode
});
$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

Ajaxを利用してたくさんの要素を操作し、イベントを制御するときに便利です。

Ajaxでformを送信する場合はformプラグインを利用しよう

jQuery Form Pluginを利用すると

$(form).ajaxSubmit();

という簡単な記述でformの送信が出来る。

classをflagとして利用しよう

addClassメソッドを利用してclassを追加しておけば、hasClassメソッドを利用してflagとして利用することが出来る。

関連エントリー

jQueryを使ったサンプルコード
jQuery版のLightBox「ThickBox」
JSONとJSONP
jQueryによるJavaScript入門

スポンサードリンク

«[リクリ]第14回 htmlの制御 jQueryによるJavaScript入門 | メイン | インクルーシブデザインワークショップ»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/998
コメントを投稿