jQuery 基本 (2)
関数とかメソッドの定義の仕方が良く分からないので、調べてみた。まとめると、こんな感じかな？
関数定義
function をつけて定義する。引数はカンマ区切りで複数指定できるし、なければ省略も可能。戻り値は return で返す。一番、シンプルな書き方がこれ。
function foo(arg) { // 処理 };
ちなみに関数を変数に代入させて保持させることができる。こんな感じ。
var foo = function(arg) { // 処理 };
メソッド定義
jQuery オブジェクトにメソッドを追加する場合、$.fn に対して定義する。
(function($) { $.fn.foo = function(arg) { // 処理 }; })(jQuery);
たとえば jQueryオブジェクトにlogメソッドを追加する場合、こんな感じに書く。メソッド内ではthisでjQueryオブジェクトを呼び出せる。
(function($){ $.fn.log = function() { console.log(this); } })(jQuery); jQuery(function($) { $("div").log(); // コンソールへのログ出力 });
任意の引数
必須の引数は arg1, arg2 のように定義して、それ以外はハッシュ形式で渡す。
$.extend(arg1, [arg2, …]) はarg1にarg2を上書きするので、デフォルト値のハッシュを準備しておいて、そこに options をマージするのが良さそう。ちなみに $.extend の最後の || {} は options がない場合のエラー対策。
(function($) {
$.fn.foo = function(arg1, arg2, options) {
var defaults = {opt1: "def1", opt2: 111, opt3: true };
var opts = $.extend(defaults, options || {});
console.log(opts.opt1 + " " + opts.opt2 + " " + opts.opt3);
}
})(jQuery);
jQuery(function() {
$('div').foo("req1","req2", {opt1: "opt1", opt2:222});
});
リフレクションっぽいメソッド実行
普通にメソッドを実行する場合、こんな感じに書く。
$('div').foo("あああ");
同じ意味で、こんな書き方ができるらしい。
$('div')['foo']("あああ");
何がうれしいかというと処理を動的に変更できるってこと。たとえば
<dt>用語：</dt> <dd>説明だよー。</dd>
があって、この <dd> 部分の表示を show/hide で切り替える場合、こんな感じに書く。
jQuery(function(){ $('dt').click(function(){ target = $(this).next(); if (target.is(':visible')) { target.hide(); } else { target.show(); } }) })
切り替えをアニメーション表示にする場合、fadeIn/fedeOut でこんな感じに書き換える。
jQuery(function(){ $('dt').click(function(){ target = $(this).next(); if (target.is(':visible')) { target.fadeOut(300); } else { target.fadeIn(300); } }) })
これらをリフレクションっぽい書き方にすることで、切り替え形式を選択できるようになる。こんな感じ。
(function($){
$.fn.effect = function(options){
opts = $.extend({show: 'show', hide: 'hide', duration: null}, options || {});
target = $(this).next();
if (target.is(':visible')) {
target[opts.hide](opts.duration);
} else {
target[opts.show](opts.duration);
}
};
})(jQuery);
show/hide の動作をさせたい場合、こんな感じ、
jQuery(function($){ $('dt').click(function(){ $(this).effect(); }); });
fadeIn/fadeOut の動作をさせたい場合、effect にパラメータを渡して、こんな感じに書く。
jQuery(function($){ $('dt').click(function(){ $(this).effect({show: 'fadeIn', hide:'fadeOut', duration: 300}); }); });
プラグインとか作りたくなると必要になるテクニッックっぽい。 :-)
おまけ
JavaScript では this (DOMオブジェクト) を自己参照できる。jQuery オブジェクトの方が扱いやすいので $(this) として使う。
$(this).html("コメント").css("color","red");
$(this) を繰り返し使う場合、self に代入して書くと可読性が良くなる。
var self = $(this); self.html("コメント").css("color","red");
