如何减少此JavaScript中的代码重复？

Question

I am working on a task that's doing front end validations to our publisher. In my code base we are using Handlebars to populate semantic themes and to add forms. We have 6 types of assets which can be added in publisher and be managed by developers.

The input fields of a form are also populated through Handlebars at runtime and it is depending on a registry extension file that belongs to each assert type. I need to include required and readonly attributes to those input fields when it is populated.

I have tried out the below code:

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

And I would like to know if this code segment is causing too much code duplication. How can I simplify this task?

Any suggestions are welcome.

Note that we can get the value of field.required and field.readonly as true or false?

Answer 1

You can extract your switch to a function that creates the element

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

and then you can alter your code to (assuming you are also using 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

This one looks a little simplified

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>';

};