Question

我正在处理一项正在对我们的发布商进行前端验证的任务。在我的代码库中，我们使用Handlebars来填充语义主题和添加表单。我们有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的值设为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>';

};

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

2 个答案: