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
    ));

并且让这个填充所有的方法只改变改变的两件事，所以我不必拥有所有这些重复的代码。解决这个问题的标准方法是什么？

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 回答