code review 前端代码优化学习

方法一、vscode中是怎么借助 AI 工具来 CR 

安装插件 CodeGeex》侧边栏选择这个 AI 插件，选择我们需要CR的代码》输入 codeRiview，回车

CR实践

1. 深层对象判空

// 深层对象
if (
    store.getters &&
  store.getters.userInfo &&
  store.getters.userInfo.menus
) {}
// 可以使用 可选链进行优化
if (store?.getters?.userInfo?.menus) {}

2. 空函数判断

props.onChange && props.onChange(e)

支持 ES11 可选链写法，可这样优化
props?.onChange?.(e)

老项目，不支持 ES11 可以这样写
const NOOP = () => 8
const { onChange = NOOP } = props
onChange(e)

3. 复杂判断逻辑抽离成单独函数

// 复杂判断逻辑
function checkGameStatus() {
  if (remaining === 0 ||
    (remaining === 1 && remainingPlayers === 1) ||
    remainingPlayers === 0) {
      quitGame()
  }
}

// 复杂判断逻辑抽离成单独函数，更方便阅读
function isGameOver() {
  return (
    remaining === 0 ||
    (remaining === 1 && remainingPlayers === 1) ||
    remainingPlayers === 0
  );
}

function checkGameStatus() {
  if (isGameOver()) {
    quitGame();
  }
}

4. 判断处理逻辑正确的梳理方式
 

// 判断逻辑不要嵌套太深
function checkStatus() {
  if (isLogin()) {
    if (isVip()) {
      if (isDoubleCheck()) {
        done();
      } else {
        throw new Error('不要重复点击');
      }
    } else {
      throw new Error('不是会员');
    }
  } else {
    throw new Error('未登录');
  }
}

// 将判断逻辑的异常逻辑提前，将正常逻辑后置
function checkStatus() {
  if (!isLogin()) {
    throw new Error('未登录');
  }

  if (!isVip()) {
    throw new Error('不是会员');
  }

  if (!isDoubleCheck()) {
    throw new Error('不要重复点击');
  }

  done();
}

5、函数传参优化
 

// 形参有非常多个
const getMyInfo = (
  name,
  age,
  gender,
  address,
  phone,
  email,
) => {
  // ...
}

// 行参封装成对象，对象函数内部解构
const getMyInfo = (options) => {
  const { name, age, gender, address, phone, email } = options;
  // ...
}

getMyInfo(
  {
    name: '张三',
    age: 18,
    gender: '男',
    address: '北京',
    phone: '123456789',
    email: '123456789@qq.com'
  }
)

6、避免魔法数字
 

// 魔法数字
if (state === 1 || state === 2) {
  // ...
} else if (state === 3) {
  // ...
}

// 魔法数字改用常量
const UNPUBLISHED = 1;
const PUBLISHED = 2;
const DELETED = 3;

if (state === UNPUBLISHED || state === PUBLISHED) {
  // ...
} else if (state === DELETED) {
  // ...
}

7、分支逻辑优化
 

// switch case
const statusMap = (status: string) => {
    switch(status) {
        case 'success':
            return 'SuccessFully'
        case 'fail':
            return 'failed'
        case 'danger'
            return 'dangerous'
        case 'info'
            return 'information'
        case 'text'
            return 'texts'
        default:
            return status
    }
}

// 使用映射进行优化
const STATUS_MAP = {
    'success': 'Successfull',
    'fail': 'failed',
    'warn': 'warning',
    'danger': 'dangerous',
    'info': 'information',
    'text': 'texts'
}

return STATUS_MAP[status] ?? status

注：?? 是 TypeScript 中的 “空值合并操作符”；当前面的值为 null 或者 undefined 时，取后面的值

8、隐式耦合优化

// 隐式耦合
function responseInterceptor(response) {
  const token = response.headers.get("authorization");
  if (token) {
    localStorage.setItem('token', token);
  }
}

function requestInterceptor(response) {
  const token = localStorage.getItem('token');
  if (token) {
    response.headers.set("authorization", token);
  }
}

这个上面两个函数有耦合的地方，但是不太明显

比如这样的情况，有一天，我不想在 responseInterceptor 函数中保存 token 到 localStorage了

function responseInterceptor(response) {
  const token = response.headers.get("authorization");
}

function requestInterceptor(response) {
  const token = localStorage.getItem('token');
  if (token) {
    response.headers.set("authorization", token);
  }
}

会发生什么？

localStorage.getItem('token')一直拿不到数据，requestInterceptor 这个函数就报废了，没用了

函数 responseInterceptor改动，影响到函数 requestInterceptor 了，隐式耦合了

怎么优化呢？

// 将隐式耦合的常数抽离成常量
const TOKEN_KEY = "authorization";
const TOKEN = 'token';

function responseInterceptor(response) {
  const token = response.headers.get(TOKEN_KEY);
  if (token) {
    localStorage.setItem(TOKEN_KEY, token);
  }
}

function requestInterceptor(response) {
  const token = localStorage.getItem(TOKEN_KEY);
  if (token) {
    response.headers.set(TOKEN_KEY, token);
  }
}

小结：虽然优化方式不同，但是核心思想都是一样，都是为了代码 更简洁、更容易理解、更容易维护。

原文链接：https://juejin.cn/post/7394792228215128098