このjqueryをより再利用するには？

Question

私は「ライダー」などで渡すことができ、同じことを追加/削除することができますが、サブアカウントのようなライダーの横にある他のアイテムについては可能です。

$(function(){ 
    var template = $('#riders-div .rider-new:first').clone(), 
     ridersCount = 0; 

    var addRider = function(){ 
     ridersCount++; 
     var rider = template.clone().removeClass("dontshow").find(':input').each(function(){ 
      var newId = this.id.replace('-', 's['+ ridersCount + '][') + ']'; 
      $(this).prev().attr('for', newId); // update label for (assume prev sib is label) 
      this.name = this.id = newId; // update id and name (assume the same) 
     }).end() // back to .rider 
     .appendTo('#rider-exist'); // add to container 
     $('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error"); 
    }; 

    $('#addButton').click(addRider()); // attach event 

$("#removeButton").click(function() { 
    $('#riders-div .rider-new:last').remove(); 
$('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error"); 
    }); 
}); 

https://gist.github.com/1081078

Answer 1

あなたは、このコードのうち、プラグインを作成することになるでしょう。プラグインにオプションを追加することで、より多くの機能が必要になるというアプローチです。私は以下のプラグインを開始した。また、要素ID（等）を置き換えるコードはより一般的である必要があります。以下では、要素idの数字を置き換える正規表現を追加しました。

実装固有のアクション/ UI調整を行うために必要な場合にコールバックを追加します。したがって、上記の例では、コールバックのメッセージhtml（$('#rider-message').html('')）をリセットするコードを追加します。

after: function(i){ 
    $('#rider-message').html(''); //... 
} 

そしてそう

$.fn.cloneForm = function(options){ 
    var self = this, count = 0, 
     opts = $.extend({}, { 
      after: function(){}, 
      template:'', 
      prependTo: '', 
      on: 'click' 
     }, options), 
     template = $(opts.template).clone(); // unmodified clone 

    self.bind(opts.on + '.cloneForm', function(){ 
     count++; 
     template.clone().find(':input').each(function(){ 
      var newId = this.id.replace(/[0-9]/i, count) // replace number 
      $(this).prev().attr('for', newId);   // update label for 
      this.name = this.id = newId;     // update id and name (assume the same) 
     }).end().prependTo(opts.prependTo); 
     opts.after.call(self, count);     // run callback 
    }); 
} 

使い方に：あなたは、この「仮面ライダー」モジュールの管理システムのいくつかの並べ替えを定義しているよう

$('#addButton').cloneForm({ 
    template: '#riders-div .rider-new:first', 
    prependTo: '#riders-div', 
    after: function(){ console.log('im done'); } 
}); 

Answer 2

それはまさに私、私は知らない（と思われます見ている）。このコードを改善する方法はいくつかのOO jを使用することです。そこから、より一般的なクラス名（変更可能なクラス名など）にする必要があるときに、それらのセレクタのパラメータをコンストラクタに設定します。また、コードを単体テスト可能にするメリットもあります！

いくつかの具体的なコード例が必要な場合は、私が何かを投稿します。私に知らせてください。