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

Question

我正在执行一项任务，即对我们的发布商进行前端验证。在我的代码库中，我们使用 Handlebars 来填充语义主题和添加表单。我们有 6 种类型的资产可以添加到发布者中并由开发者管理。

表单的输入字段也在运行时通过 Handlebars 填充，这取决于属于每个断言类型的注册表扩展文件。我需要在填充这些输入字段时将 required 和 readonly 属性包括在内。

我试过下面的代码：

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 的值是真还是假？

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

};

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

How can I reduce code duplication in this JavaScript?

javascript

handlebars.js