mprove your jQuery – 25 excellent tips
ｊQueryを利用する際の25のTipsを見つけたので紹介します。
ちょっと長いですが、かなりいいです。
google jsapiを利用しましょう
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Your code goes here.
});
これを利用すると読み込み時間が高速になります。
チートシートを利用しましょう
わからなくなったら、チートシートを利用し、さくっと。
チートシートはこちらがいいかもしれません。
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
ライブラリとか、自作ものはパッケージにしましょう
パッケージ化するとソース容量が軽くなり、読み込みが早くなります。
パッケージ化するならPacker by Dean Edwardsがいいですよ！
FireBugのコンソールは使うべき
コンソールを使って実行時間を計測してみるといいかもしれません。
コンソールでの計測は以下の様な感じ。
console.time("create list");
for(var i = 0; i < 1000; i++){
var mylist = $(".mylist") ;
mylist.append('This is list item ' + i);
}
console.timeEnd('create list');
キャッシュを有効に利用しましょう
ブラウザキャッシュじゃないですが、varで定義するのは1回で押さえる要にする。ってことですね。
書くとこんな感じ。
for(var i = 0; i < 1000; i++){
var mylist = $(".mylist") ;
mylist.append('This is list item ' + i);
}
これでは同じことを何度も繰り返さない（DRY）プログラムには当てはまらないよね！
同じことをするなら1回だけにすませようよ！となると以下の世なものがいいです。
var mylist = $(".mylist") ;
for(var i = 0; i < 1000; i++){
mylist.append('This is list item ' + i);
}
だいたい4倍程度実行速度は上がります。
DOMの操作は必要最低限にしましょう
after()とかappend()とかを毎回繰り返すと偉いことになるので、一回で処理してしまいましょう。
var mylist = $(".mylist") ;
for(var i = 0; i < 1000; i++){
insHtml += 'This is list item ' + i;
}
mylist.html(insHtml);
こうすると、毎回appendするより、50倍近く早くなります。
1つの要素で囲い込んでしまうテクニック
1つの要素である要素を囲んでしまう為に非常に素早い方法を。
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
すっごくはやいよ！
可能な限りclassでは無く、IDを使いましょう
// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += 'This is a list item';
}
myListItems += '';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
これだと5秒以上かかってしまいます。
// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += 'This is a list item';
}
myListItems += '';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
しかし、これだと0.61秒ほどで終わります。500倍近く違いますね！
セレクタを利用する時はコンテキストも指定しましょう
var selectedItem = $('#listItem' + i);
こっちよりは
var selectedItem = $('#listItem' + i, $('.myList'));
こっちがいいですよ！
理由は検索対象を狭くするんです。「class=’myList’」の中から検索した方がはやいですよね！
チェーンメソッドを利用しましょう
セレクタからなるべく切らないように連結しましょう。
$('myDiv').removeClass('off').addClass('on');
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('This cell is now red');
取得したい要素を変えるにはfind()とend()を利用しましょう
$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');
自分で作った関数もチェーンメソッドとして登録して使うこともできます。
$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');
animateメソッドを習得しよう
fadeInだってslideDownだって簡単にできます。
slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},
fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}
たったこれだけで見た目をゴージャスに！
そして、高さや幅を変えるときはこんな感じ。
以下の場合はマウスオーバーしたら、高さを100pxにします。
$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});
// 複数ある場合は以下の様に書きます。
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});
でもこれって同じことしてるようにみえません？
そんなときは以下の様にまとめることができます！
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});
eventデリゲートについて学びましょう
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
こんなスクリプトがあったとして、10行50列のテーブルがあったら、500個のイベントが用意されてしまいます。
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
こうすることで、eに対してスタイルを適用することができます。
classに情報を設定しよう
メニューが開閉するものを作る場合。
click me <ul> <li>Menu item 1</li> <li>Menu item 2</li> <li>Menu item 3</li> </ul>
こんなのがあったら、addClass()を使ってclassを追加して、開閉を確認しましょう。
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});
dataメソッドを使って情報を保存し利用しよう
dataを使うと情報を保存することができます。
htmlにclassを使うだけじゃなく、dataメソッドを使うのもいいです。
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});
自作セレクタを作って使ってみよう
jQueryではセレクタを自作することができます。
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
自作セレクタを使って処理するのもまた醍醐味でもありますね！
HTMLが読み込まれてから処理を行いましょう
<div class="fieldOuter"> <div class="inner"> <div class="field">This is field number 1</div> </div> <div class="errorBar"> <div class="icon"><img src="icon.png" alt="icon" /></div> <div class="message"><span>This is an error message</span></div> </div> </div> <div class="fieldOuter"> <div class="inner"> <div class="field">This is field number 2</div> </div> <div class="errorBar"> <div class="icon"><img src="icon.png" alt="icon" /></div> <div class="message"><span>This is an error message</span></div> </div> </div>
なんてHTMLがあって、タグを入れ込みます。
以下の様に簡単にしておくといいでしょう。
<div class="field">This is field 1</div> <div class="field">This is field 2</div> <div class="field">This is field 3</div> <div class="field">This is field 4</div> <div class="field">This is field 5</div>
後は、jQueryを使ってHTMLを流し込みます。
$(document).ready(function() {
$('.field').before('
<div class="fieldOuter">
<div class="inner">');<br /> $('.field').after('</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>');
});
読み込みがコンテンツはSEO効果が薄い
google mapとかおもいものは、load()メソッドを使ってよみこみましょう。
$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});
jQueryの組み込み関数を利用しましょう
普通のjavascriptのみで処理してしまうともったいないなぁと思うこともあります。
selectの値を取得するのは以下の1行で終わるのに・・・
$('#selectList').val();
ほかのライブラリを使うならnoconflictを使って回避しましょう
ほかのライブラリとかぶってしまって、処理が行えない！って場合は以下の様に書いてみると幸せになれますよ。
var $j = jQuery.noConflict();
$j('#myDiv').hide();
noConflict()関数は、バッティングを回避する魔法の呪文なのです。
画像の読み込み完了を伝えてみよう
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});
これだけ。
常に最新バージョンを使いましょう
最新バージョンを使っていると幸せになれることがいっぱい！
新しい便利な関数の追加とか、bugfixとか！
要素の存在有無を確かめる
if ($('#myDiv).length) {
// your code
}
これで０ならば、要素が無いってことですよね！
HTML要素にJSクラスをつけましょう
以下の様にクラスをつけます。
$('HTML').addClass('JS');
そんで、cssには以下のように指定しておきます。
.JS #myDiv{display:none;}
こうすることで、javascriptがONの時は、myDivが見えません。
myDivにはjavascriptがoffの状態でも内容を閲覧できるようにしておきましょう。
初期の挙動を止めるにはreturn falseを使って止めましょう
Click me!
こんなのがあって、
$('popup').click(function(){
// Launch popup code
});
こんなのがあったときに、クリックすると、ページ上部に移動してしまいます。。。
これを回避するには、
$('popup').click(function(){
// Launch popup code
return false;
});
こうすると、ページ上部へ移動することをキャンセルすることができます！
ショートハンドを使いましょう
$(document).ready(function (){
// your code
});
長い（´・ω・）
ショートハンドラを使って短くすませましょう！
$(function (){
// your code
});
以上で25個です。
訳間違いがあったらご指摘いただけると助かります。。。
最近のコメント