Question

我有一个工作功能，但我认为它应该变得更小更好但我不会看到它。有人可以帮我改进这个功能让它变得更好：

我正在无序列表中创建一个新的li项目。在那里有3个分区的omse信息，他们得到一个班级让他们向左边漂浮。

这是我使用的代码，它全部列出来，它可以很好地改进，我希望学会更多地重构我的代码，所以帮助是很好的。

// making new li item inn <ul>
function addproduction(){
  // getting info from form
  var startdatum_form = document.getElementById('startdatum').value;
  var uren_form  = document.getElementById('uren').value;
  var ordernummer_form  = document.getElementById('ordernummer').value;

  // new li element
  var newli = document.createElement('li');
  newli.setAttribute('class', 'ui-state-default');

  var div1 = document.createElement('div');
  div1.setAttribute('class', 'div1');
    var sortableicon = document.createElement('span');
    sortableicon.setAttribute('class', 'ui-icon ui-icon-arrowthick-2-n-s');

    // count current li elements in UL:
      var number = 0;
      var ullist = document.getElementById('sortable');
      for(i=0;i< ullist.childNodes.length;i++){
          if(ullist.childNodes[i].nodeName=='LI'){
              number++;
          }
      }
  newli.setAttribute('id', 'p'+(number+1));


    // text node (item x)
    var nrText = document.createTextNode('Item ' + (number+1));
    div1.appendChild(sortableicon)
    div1.appendChild(nrText);
  var div2 = document.createElement('div');
  div2.setAttribute('class', 'div1');
        var indiv1 = document.createElement('div');
        indiv1.appendChild(document.createTextNode('Title'));
        var indiv2 = document.createElement('div');
        indiv2.appendChild(document.createTextNode('Start'));
        var indiv3 = document.createElement('div');
        indiv3.appendChild(document.createTextNode('End'));
        var indiv4 = document.createElement('div');
        indiv4.appendChild(document.createTextNode('Uren'));
            div2.appendChild(indiv1);
            div2.appendChild(indiv2);
            div2.appendChild(indiv3);
            div2.appendChild(indiv4);
  var div3 = document.createElement('div');
  div3.setAttribute('class', 'div3');
        var indiv5 = document.createElement('div');
        indiv5.appendChild(document.createTextNode(ordernummer_form));
        var indiv6 = document.createElement('div');
        indiv6.appendChild(document.createTextNode(startdatum_form));
        var indiv7 = document.createElement('div');
        indiv7.appendChild(document.createTextNode('end'));
        var indiv8 = document.createElement('div');
        indiv8.appendChild(document.createTextNode(uren_form));
            div3.appendChild(indiv5);
            div3.appendChild(indiv6);
            div3.appendChild(indiv7);
            div3.appendChild(indiv8);

    newli.appendChild(div1);
    newli.appendChild(div2);
    newli.appendChild(div3);

    // add new production to list
    document.getElementById('sortable').appendChild(newli);
    saveNewEntry( (number+1), ordernummer_form, startdatum_form, uren_form );
}

Answer 1

一个可以应用于代码其他部分的小例子

  var startdatum_form = document.getElementById('startdatum').value;
  var uren_form  = document.getElementById('uren').value;
  var ordernummer_form  = document.getElementById('ordernummer').value;

可能是

var startdatum_form   = get_value('startdatum');
var uren_form         = get_value('uren');
var ordernummer_form  = get_value('ordernummer');

function get_value( field ) {
  return document.getElementById(field).value;
}

重构一个函数组成一个表格

1 个答案: