如何減少此JavaScript中的代碼重復？

Question

我正在做的任務是對發布者進行前端驗證。 在我的代碼庫中，我們使用把手來填充語義主題並添加表單。 我們有6種資產類型，可以添加到發布者中並由開發者進行管理。

表單的輸入字段也會在運行時通過Handlebars填充，並且取決於屬於每個斷言類型的注冊表擴展文件。 填充時，我需要在這些輸入字段中包含必填和只讀屬性。

我已經嘗試了以下代碼：

var renderField = function (field, options) {
  var out = '';
  var value = field.value || '';
  if (field.required) {
    switch (field.type) {
      case 'options':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">' + renderOptions(field.value, field.values[0].value, field) + '</div>';
        break;
      case 'text':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="text" class="form-control"  value="' + value + '"" ' + renderFieldMetaData(field, null, options) + ' class="span8" required></div>';
        break;
      case 'text-area':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><textarea row="3" ' + renderFieldMetaData(field, null, options) + ' class="width-full" required>' + value + '</textarea></div>';
        break;
      case 'file':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="file"  value="' + value + '" ' + renderFieldMetaData(field, null, options) + ' required></div>';
        break;
      default:
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">Normal Field' + field.type + '</div>';
        break;
    }
    return out;
  }

  if (field.readonly) {
    switch (field.type) {
      case 'options':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">' + renderOptions(field.value, field.values[0].value, field) + '</div>';
        break;
      case 'text':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="text" class="form-control"  value="' + value + '"" ' + renderFieldMetaData(field, null, options) + ' class="span8" readonly></div>';
        break;
      case 'text-area':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><textarea row="3" ' + renderFieldMetaData(field, null, options) + ' class="width-full" readonly>' + value + '</textarea></div>';
        break;
      case 'file':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="file"  value="' + value + '" ' + renderFieldMetaData(field, null, options) + ' readonly></div>';
        break;
      default:
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">Normal Field' + field.type + '</div>';
        break;
    }
    return out;
  }

  if (!(field.required) || !(field.readonly)) {
    switch (field.type) {
      case 'options':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">' + renderOptions(field.value, field.values[0].value, field) + '</div>';
        break;
      case 'text':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="text" class="form-control"  value="' + value + '"" ' + renderFieldMetaData(field, null, options) + ' class="span8"></div>';
        break;
      case 'text-area':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><textarea row="3" ' + renderFieldMetaData(field, null, options) + ' class="width-full">' + value + '</textarea></div>';
        break;
      case 'file':
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"><input type="file"  value="' + value + '" ' + renderFieldMetaData(field, null, options) + '></div>';
        break;
      default:
        out = '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">Normal Field' + field.type + '</div>';
        break;
    }
    return out;
  }
};

我想知道此代碼段是否引起過多的代碼重復。 如何簡化此任務？

歡迎任何建議。

請注意，我們可以將field.required和field.readonly的值field.readonly為true或false嗎？

Answer 1

您可以將開關提取到創建元素的函數

var create = function(field){
    switch (field.type) {
        case 'options':
           return renderOptions(field.value, field.values[0].value, field);
        case 'text':
           return '<input type="text" class="form-control"  value="' + value + '"" ' + renderFieldMetaData(field, null, options) + ' class="span8" >';
        case 'text-area':
           return '<textarea row="3" ' + renderFieldMetaData(field, null, options) + ' class="width-full" >'+value+'</textarea>';
        case 'file':
           return '<input type="file"  value="' + value + '" ' + renderFieldMetaData(field, null, options) + ' >';
        default:
          return 'Normal Field' + field.type;
    }
}

然后您可以將代碼更改為（假設您也在使用jquery）

var element = create(field);
if(field.type === "options" ||
   field.type === "text" ||
   field.type === "text-area" ||
   field.type === "file"){
  if(field.required){
     element.attr('required',true);
  }
  if(field.readonly){
     element.attr('readonly',true);
  }
}
var outer = $('<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12"></div>');
outer.append(element);

Answer 2

這個看起來有點簡化

var renderField = function (field, options) {
  var out = '';
  var value = field.value || '';

  var cls = '';
  if(field.required){
    cls = 'required';
  }else if(field.readonly){
    cls = 'readonly';
  }

  switch (field.type) {
    case 'options':
      out = renderOptions(field.value, field.values[0].value, field);
      break;
    case 'text':
      out = '<input type="text" class="form-control"  value="' + value + '"" ' + renderFieldMetaData(field, null, options) + ' class="span8" '+cls+'>';
      break;
    case 'text-area':
      out = '<textarea row="3" ' + renderFieldMetaData(field, null, options) + ' class="width-full" '+cls+'>' + value + '</textarea>';
      break;
    case 'file':
      out = '<input type="file"  value="' + value + '" ' + renderFieldMetaData(field, null, options) + ' '+cls+'>';
      break;
    default:
      out = 'Normal Field' + field.type + '';
      break;
  }
  return '<div class="custom-form-right col-lg-10 col-md-10 col-sm-12 col-xs-12">'+out+'</div>';

};