Question

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

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

Answer 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;
       }
    }
}

重载jqueryui小部件的方法

1 个答案: