条件付メソッドチェーンを実現するjQuery pluginを作ってみた
発端
monjudoh | jQueryで出来たらいいなーと思うことは条件付メソッドチェーンで、メソッドチェーン内の特定のメソッド呼び出しを特定条件を満たした場合のみ実際に実行するように出来たら、常にメソッドチェーンでやれて便利だと思う。 | |
monjudoh | 条件判定メソッドをjQuery.fnに追加してやって、そいつがpluginのルールを破ってjQueryオブジェクトのラッパーを返して…みたいな形でやれば出来そうな気がする。 |
実際のコード
(function($){ $.extend( $.fn ,{ 'ifNext':function(cond){ if(cond)return this; var self = this; var jqWrapper = {}; var returnSelf = function(){return self;}; for(var i in $.fn){ if($.isFunction($.fn[i])){ jqWrapper[i] = returnSelf; } } return $.extend({},self,jqWrapper); } }); })(jQuery);
せつめー
jQueryオブジェクトにifNextメソッドを生やします。
ifNextメソッドの引数がtrueと評価されるものならifNextメソッドを呼ばないのと同じです。
falseと評価される場合、メソッドチェーンの次のメソッドをスキップします。
例
// ifNextを使わない場合 $('<div/>') .append('<span>span1</span>') .append('<span>span2</span>') .append('<span>span3</span>') .html(); // "<span>span1</span><span>span2</span><span>span3</span>" // ifNextを使った場合 $('<div/>') .append('<span>span1</span>') .ifNext(true)//次のappendは実行される .append('<span>span2</span>') .ifNext(false)//次のappendは実行されない .append('<span>span3</span>') .html(); // "<span>span1</span><span>span2</span>"
jQueryUIのウィジェットpluginを作るときなどのように、
メソッドチェーンでDOMツリーを構築してやりたい場合で、
条件によって要素の追加事態をやったりやらなかったりしたい場合に、
記述が楽になるのではないかと思います。
とりあえずたたき台ということで。
今後の課題
- チェーンしない(jQueryオブジェクトを返さない)メソッドは潰さなくていいのではないか?
- 影響の及ぶメソッド呼び出し回数を1回のみからn回にしたい
- else相当のものも実装すると便利かも