Рефакторинг двух jQuery UI автоматически завершается, чтобы стать более функциональным и сухим - PullRequest
Новая
       10

Рефакторинг двух jQuery UI автоматически завершается, чтобы стать более функциональным и сухим

0 голосов
/ 08 сентября 2011

У меня есть два автозаполнения jQuery UI на одной странице, и я хотел бы сделать код более "функциональным" и лаконичным.Мой опыт почти полностью соответствует требованиям, и я хотел бы более серьезно относиться к написанию более функционального JavaScript.

Обе эти функции являются свойствами литерала объекта, который я использую для пространства имен функций на странице.Прямо сейчас есть много кода, который повторяется между функциями, и я хотел бы использовать что-то похожее на шаблон " частичное применение " для сокращения кода.

автозаполнение 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;
                }   
            } 
        }
    })
},

1 Ответ

2 голосов
/ 08 сентября 2011 
//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));
};
...