时间戳

首页 > 解决方案 > 在下面列出的代码上使用反应拆分技术的最佳方法是什么

javascript - 在下面列出的代码上使用反应拆分技术的最佳方法是什么

问题描述

我能否获得一些建议，以在下面列出的代码中使用反应拆分技术。

我正在尝试解决 sonarlint 的一些错误，如果我能得到一些关于如何使用反应拆分技术的建议或参考，我真的很感激。

import { validEmail } from '.';

export default (fieldName, rules, value, type, required) => {
    const frontError = [];
    if ('match' in rules && value !== rules.match) {
        frontError.push(`Does not match`);
      }

      if (required && (!value || (!value.length && !value.value))) {
        frontError.push(`Please provide ${startCase(fieldName)}`);
      } else if (rules.min && value.length < rules.min) {
        frontError.push(`Please provide a longer ${startCase(fieldName)} - minimum length is ${rules.min}`);
      }

      if (rules.lower && !/[a-z]/.test(value)) {
        frontError.push(`Must contain 1 or more lowercase letter`);
      }

      if (rules.upper && !/[A-Z]/.test(value)) {
        frontError.push(`Must contain 1 or more uppercase letter`);
      }

      if (rules.digit && !/\d/.test(value)) {
        frontError.push(`Must contain 1 or more digit`);
      }

      if (rules.special && !/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(value)) {
        frontError.push(`Must contain 1 or more special character`);
      }

      if (type === 'email' && !validEmail(value)) {
        frontError.push(`Please enter a valid email`);
      }

      if (frontError.length) {
          return frontError.join(' ');
      }

      return '';
};

标签： javascript

解决方案

  • React 代码拆分是一种在用户需要时“延迟加载”组件的方法，可以提高应用程序的性能
  • 认知复杂度是衡量一个函数对开发人员来说阅读的难易程度

现在我们已经清除了这一点，忘记代码拆分你的函数要做的事情是重构你的函数以降低代码复杂性，这可以通过几种方式来完成，例如使用更少的速记和中断if语句来分隔函数。重要的是要记住，这种 lint 检查将有利于可读性而不是简洁性。

如何使函数更“可读”完全取决于您，但这里有一个示例： 

const startCase = (string)=>
 string.charAt(0).toUpperCase() + string.slice(1);

const requiredError = (value, required, fieldName) => {
    if (required && (!value || (!value.length && !value.value))) {
        return `Please provide ${startCase(fieldName)}`
    }
    return null;
}

const matchError = (value, match) => {
    if (match && value !== match) {
        return 'Does not match';
    }
    return null;
}

const minError = (value, min, required, fieldName) => {
    if (!requiredError(value, required, fieldName) && min && value.length < min) {
        return `Please provide a longer ${startCase(fieldName)} - minimum length is ${min}`;
    }
    return null;
}

const upperError = (value, upper) => {
    if (upper && !/[A-Z]/.test(value)){
        return `Must contain 1 or more uppercase letter`
    }
    return null;
}

const validate = (fieldName, rules, value, type, required) => {
    const frontError = [
        matchError(value, rules.match),
        requiredError(value, required, fieldName),
        minError(value, rules.min, required, fieldName),
        upperError(value, rules.upper),
        // ...and so on
    ];
    
    return frontError.filter(error=> error !== null).join(' ');
};

const test = validate('Name', {
  min: 3, required: true, upper: true },'ok', 'text', true);

console.log('errors:', test);

我建议使用 VSCode 插件，例如CodeMetrics，它可以实时对函数的复杂度进行排名。

推荐阅读