Question

我在同一页面上有两个jQuery UI自动完成，我想让代码更“实用”和简洁。我的背景几乎是严格的OO，我想更加认真地编写更多功能的JavaScript。

这两个函数都是对象文字的属性，我用它来命名页面上的函数。现在有很多代码在函数之间重复，我想使用类似于“partial application”模式的代码来减少代码。

自动填充1：

initProject : function(){
    var selected = 0;
    var suggestions = []; 
    var projs;
    var len;

    $("#projectNum").autocomplete({
        source : function(req, add){
            $.getJSON("projectList.do?method=viewProjectListJSON&contractID=" + req.term, function(data){
                //clear the suggestions array
                suggestions = [];

                projs = data[0];

                len = projs.length;

                for(var i = 0; i < len; i++){
                    suggestions.push(projs[i][1]);
                };
                add(suggestions);   

            });//end getjson callback
        }, 

        minLength : 2,

        select : function(){
            thisval = $(this).val();

            for(var i = 0;i < len; i++){

                if(thisval === projs[i][1]){
                    $("#projectID").val(projs[i][0]);
                    return;
                }   
            }
        }
    })
},

自动完成2：

initCAU : function(){
    var selected = 0;
    var suggestions = [];
    var caus;
    var len;
    $("#cauNum").autocomplete({
        source : function(req, add){
            $.getJSON("cauList.do?method=viewCAUListJSON&cauNumber=" + req.term, function(data){
                suggestions = [];

                caus = data[0];
                len = caus.length;

                for(var i = 0; i < len; i++){
                    suggestions.push(caus[i][1].toString());
                };
                add(suggestions);   
            }); //end getjson callback
        }, 

        minLength : 2,

        select : function(){
            thisval = $(this).val();

            for(var i = 0;i < len; i++){

                if(parseInt(thisval,10) === caus[i][1]){
                    $("#cauID").val(caus[i][0]);
                    return;
                }   
            } 
        }
    })
},

Answer 1

//factored-out common code...
var autocompleter = function(urlPrefix, fragment) {
  var selected = 0;
  var suggestions = [];
  var items;
  var len;
  return ({
    minLength: 2,
    source: function(req, add) {
      $.getJSON(urlPrefix + req.term, function(data) {
          suggestions = [];
          items = data[0];
          len = items.length;
          for(var i = 0; i < len; i++) {
            suggestions.push(projs[i][1]);
          };
          add(suggestions);
        }); //end JSON callback
    }, //end source callback
    select: function() {
      var thisVal = $(this).val();
      for(var i = 0; i < len; i++) {
        if(thisVal === items[i][1]) {
          $(fragment).val(items[i][0]);
          return;
        }
      }
    } //end select callback
  });
};

//verbose but clear way to achieve what you were doing before.
var initCAU = function() {
  var attachTo = "#cauNum";
  var urlPrefix = "cauList.do?method=viewCAUListJSON&cauNumber=";
  var fragment = "#cauID";
  $(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};

var initProject = function() {
  var attachTo = "#projectNum";
  var urlPrefix = "projectList.do?method=viewProjectListJSON&contractID=";
  var fragment = "#projectID";
  $(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};

重构两个jQuery UI自动完成功能更强大＆amp;干

1 个答案: