0

私はjquery/jqueryuiにかなり慣れていませんが、急速に進歩しています。重複したコードがたくさんありますが、リファクタリングする方法が必要です。

たとえば、次のように定義されたオートコンプリートウィジェットがたくさんあります。

 $( "#workOrderSearchCustomer" )
    .autocomplete({
       source: function( request, response ) {
          $.getJSON( "/autocomplete/customers", {
             term: acExtractLast( request.term )
          }, response )
       },
       search: function() {
          // custom minLength
          var term = acExtractLast( this.value );
          if ( term.length < 2 ) {
             return false;
          }
       },
       focus: function() {
          // prevent value inserted on focus
          return false;
       },
       select: function( event, ui ) {
          var terms = acSplit( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );

          // update the search
          searchAndReloadWorkorderTabs();
          return false;
       }
 });

コールバック関数とオートコンプリートコンテンツの場所を変更することを除いて、すべて同じコードを使用します。この場合、ウィジェットごとに変わるのは「/ autocomplete /customers」とsearchAndReloadWorkorderTabs（）だけです。

私は次のようなことができるようになりたいです：

 $( "#workOrderSearchCustomer" )
    .autocomplete( initAutoComplete( 
       "autocomplete/customers", 
       searchAndReloadWorkorderTabs
    ));

そして、これをすべてのメソッドに入力して、変更する2つのことだけを変更するようにします。したがって、この重複したコードをすべて用意する必要はありません。これを解決する標準的な方法は何ですか？

4

1 に答える 1

1

構成オブジェクトの作成を担当する関数を導入できます。これは基本的にコードと同じですが、関数のクロージャーからパラメーターを取得します。呼び出しは、質問に示されているとおりになります。

function initAutoComplete(endpointURI, callbackFunction){
   return {
       source: function( request, response ) {
          $.getJSON( endpointURI, {
             term: acExtractLast( request.term )
          }, response )
       },
       search: function() {
          // custom minLength
          var term = acExtractLast( this.value );
          if ( term.length < 2 ) {
             return false;
          }
       },
       focus: function() {
          // prevent value inserted on focus
          return false;
       },
       select: function( event, ui ) {
          var terms = acSplit( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );

          // update the search
          callbackFunction();
          return false;
       }
    }
}
于 2012-09-29T21:12:48.467 に答える