まぁ、うちの同僚なんですけど。
私も人にどうこう言えるほど大したスキルはないですが、それでも即実践できるお役立ちTipsをいくつかお届け。
全体をラップする
$('.hoge').addClass('active'); $('.piyo').css('color', 'red');
みたく、唐突に書き始めるんじゃなくて、
$(function(){// ラップする! $('.hoge').addClass('active'); $('.piyo').css('color', 'red'); });// こうやって囲う!
こうすると、変数のスコープを絞れてコードのお行儀がよろしくなります。
あとは、いわゆるDOMContentLoadedのタイミングで内容が実行されるようになります。
ちなみに、
$('document').ready(function() { ... }); $(function(){ ... });
一緒なので短いほうが良いよねー。
セレクタはキャッシュする
$('.hoge').addClass('active'); $('.hoge').css('color', 'red'); $('.hoge').hide();
って、何回も書くことになるなら、
var $hoge = $('hoge');// 一つにキャッシュしておく! $hoge.addClass('active'); $hoge.css('color', 'red'); $hoge.hide();
ってすると、コードの見通しもよくなるし、無駄がなくなってパフォーマンスもよくなります。
関数もキャッシュする
$('.hoge').toggle( function() { ... }, function() { ... } );
って書くよりも、
var funcA = function() { ... }; var funcB = function() { ... }; $('.hoge').toggle(funcA, funcB);
って書くほうが、見通しがよくて良いです。
もちろん、本当に短い処理ならそのまま書いてもよいけど。
親から攻める
ちょっと話題は戻るけど、
<div class="hoge-box"> <div class="title">コレと</div> <ul class="lists"> <li>コレで何かしたいなら</li> <li></li> </ul> </div>
こんなHTMLがあるときに、
$('.title').addClass('selected'); $('.lists li:eq(0)').addClass('selected');
とか書くよりも・・・、
var $hogeBox = $('hoge-box');// 親だけ捕まえておいて、 // 親から攻める! $hogeBox.find('.title').addClass('selected'); $hogeBox.find('.lists').children().first().addClass('selected');
ってする方が、パフォーマンスがよいです。
jQueryだからこそできる $('.lists li:eq(0)') みたいな書き方は、実はあまりパフォーマンスがよくなくて、できる限り避けるのがよいです。
メソッドはチェーンする
また先の例ですが、
$('.hoge').addClass('active'); $('.hoge').css('color', 'red'); $('.hoge').hide();
同じ要素に何回もアクセスするんじゃなくて、
// チェーンさせるともっと良い $('.hoge').addClass('active').css('color', 'red').hide();
同じ要素へ何かするなら、つなげて書きましょう。
うわぁ、すごくそれっぽい。
ドキュメントをお読みなさい
これに尽きます。
使えるメソッドを全部暗記できるでもなし、ふとした瞬間に調べるクセと、調べられる方法さえ知ってればなんとかなります。
日本語ドキュメントもいろいろあることやし。
ソースをお読みなさい
jQueryを使うためにJavaScriptをはじめた!って人はそんなに多くないはずで、どっちかというとJavaScript覚えたくてまずはjQueryって人が最近は多い気がしないでも。
で、どうすればJavaScriptが覚えられるか、良いコードが書けるように成るか。
良いコードを読んでマネるのが一番手っ取り早いですよね。
てなわけで。
古いIEの相手をしない or スマートフォンだけターゲットにしてるなら、もうver. 2.x系だけ見てても良い気がします。
以上、コレだけでもとりあえず覚えておくとそれらしいコードになるかと。
よくよく見ると、jQueryに限った話じゃなくてJavaScript全般の話みたいになってたw