例えば、以下のような jQuery のコードがあったとします。
var $niko = $('div.checkbox.niko'),
$maki = $('div.checkbox.maki');
$niko
.find('input[type=checkbox]')
.prop('checked', true);
$niko
.append($('<div>', { text: 'にっこにっこにー' }));
$maki
.find('input[type=checkbox]')
.prop('checked', true);
$maki
.find('label')
.css({
color: 'white',
'background-color': 'rgb(239, 69, 74)',
padding: '4px'
});
このコードを見て、私は次のことを考えました。
-
.find().prop()
の処理を共通化できないだろうか。 -
.find().prop()
の処理の返り値を$('input')
ではなく$('div.checkbox')
のままにできないだろう。そしたらメソッドチェーンを繋げられるのに。
そこで何か方法はないか思案していたところ、Ruby の Object#tap を思い出しました。
self を引数としてブロックを評価し、self を返します。
(ちなみに Ruby における self
は JavaScript における this
です。)
こんなメソッドが jQuery にもないかな? と思い探してみましたが見つかりませんでした。
しかし Google 検索してみると 「jQueryでtapを定義してみた」 というまさに僕と同じことを考えていた方がいらっしゃったので、この知恵を拝借しました。
// jQuery に .tap() 関数を追加する。
$.fn.tap = function (fn) {
if ($.isFunction(fn)) { fn.call(this); }
return this;
};
var $niko = $('div.checkbox.niko'),
$maki = $('div.checkbox.maki'),
check;
// input 要素をチェックする処理を関数として共通化する。
check = function () {
this.find('input[type=checkbox]')
.prop('checked', true);
};
$niko
.tap(check)
.append($('<div>', { text: 'にっこにっこにー' }));
$maki
.tap(check)
.find('label')
.css({
color: 'white',
'background-color': 'rgb(239, 69, 74)',
padding: '4px'
});
これでなかなかスッキリしたと思います