可能是你见过的最热门的代码重构🔥

我对编程有一些信念。

我总是重写、重新思考、研究、重新发明和重构。

一开始这确实花费了我一些时间，但现在这不是问题了。

在此过程中，我们了解了 JavaScript 的工作原理和原因。

我从不满足，即使某件事成功了。

一切都很重要，函数名称、变量名称，甚至道具排序。

我正在进行代码审查并达到了一项功能。

我需要在这里提一下，重构只花了我不到五分钟的时间。

该函数负责根据国家代码格式化给定的地址。

例如

const address = {
  city: "Belgreen",
  countryCode: 'us',
  county: null,
  state: "Vermont",
  suburb: null,
  zip: "4636"
}

实施如下。

const addressTextView = () => {
  const city = address.city;
  const state = address.state;
  const zip = address.zip;
  const suburb = address.suburb;
  const county = address.county;

  switch (address.countryCode) {
    case 'uk':
      return (
        (zip != null ? zip + ', ' : '') +
        (suburb != null ? suburb + ', ' : '') +
        (city != null ? city + ', ' : '') +
        (state != null ? state : '')
      );
    case 'us':
      return (
        (city != null ? city + ', ' : '') +
        (state != null ? state + ', ' : '') +
        (zip != null ? zip : '')
      );
    case 'nz':
      return (
        (zip != null ? zip + ', ' : '') +
        (city != null ? city + ', ' : '') +
        (county != null ? county + ', ' : '') +
        (state != null ? state : '')
      );
    default:
      return (
        (zip != null ? zip + ', ' : '') +
        (suburb != null ? suburb + ', ' : '') +
        (state != null ? state + ', ' : '') +
        (county != null ? county : '')
      );
  }
}

令我困扰的第一件事是每种情况下的三元组。

然后重复。

我开始将每次返回视为按不同顺序排列的键数组。

我并不关心空值。

我刚刚开始创建图案。

//
  switch (address.countryCode) {
    case 'uk':
      return [zip, suburb, city, state].join(', ');
    case 'us':
      return [city, state, zip].join(', ');
    case 'nz':
      return [zip, city, county, state].join(', ');
    default:
      return [zip, suburb, state, county].join(', ');
//

然后，我看到了模式并创建了一个函数来处理每个返回。

const joinStrings = (...args) => args.join(', ');

开关看起来像这样。

//
  switch (address.countryCode) {
    case 'uk':
      return joinStrings(zip, suburb, city, state);
    case 'us':
      return joinStrings(city, state, zip);
    case 'nz':
      return joinStrings(zip, city, county, state);
    default:
      return joinStrings(zip, suburb, state, county);
//

然后我做了一些让一些人惊讶的事情。

我从每个数组中过滤掉空值的方式。

const joinStrings = (...args) => args.filter(Boolean).join(', ');

最终代码如下。

const joinStrings = (...args) => args.filter(Boolean).join(', ')

const formatAddress = ({ city, county, countryCode, state, suburb, zip }) => { 
  switch (countryCode) {
    case 'uk':
      return joinStrings(zip, suburb, city, state);
    case 'us':
      return joinStrings(city, state, zip);
    case 'nz':
      return joinStrings(zip, city, county, state);
    default:
      return joinStrings(zip, suburb, state, county);
  }
};

我的想法。

两种功能均有效。业务开展顺利。

送货是可以的，但是……

总是努力改进，如果某件事有效，就绝不满足。

我们有一个函数，addressTextView但它的功能不太清楚。它也使用了父作用域中的地址对象。

然后，我们用三元组制定了很多逻辑，一开始读起来也不太清楚。

我将该函数重命名为formatAddress更清晰的，并将地址对象作为参数传递。

我将逻辑分离到名为的另一个函数中joinStrings。该函数独立于formatAddress，必要时可以重复使用。

我们还从 45 行代码减少到了 13 行。😍

就是这样。

我不是在吹牛，我想说的是，它是否有效并不重要，但如果你想学习和成长为一名开发人员，有很多方法可以做到这一点。

文章来源：https://dev.to/potouridisio/probously-the-hottest-code-refactoring-you-ever-saw-3072