CodeReview 中最容易被吐槽的 7 个点！！！

常量提取
请看如下代码，可能很多人都是这么写代码的，在页面中疯狂的去使用常量，而且非常分散，这样做的坏处就是，你以后维护的成本非常高，你得到处找，然后去修改。非常累~

setTimeout(() => {
 // coding
}, 10 * 1000);

this.http.get('/api/v1/xxxxxx');

localStorage.setItem('token', 'xxxxxx')
最好就是一个模块有一个 constants.js 文件，用来统一存放此模块的一些常量，并且要使用大驼峰命名去定义，千万不要嫌麻烦！

// constants.js

const TIME_OUT = 10 * 1000;
const REQUEST_URL = '/api/v1/xxxxxx';
const TOKEN_KEY = 'token'
合理使用 enum
我们来看下面一段代码，比如一个页面中有大量的判断，且其实条件都是一样的，比如：

if (role === 1) {
  // coding
}
// .....
if (role === 2) {
  // coding
}
// .....
if (role === 1) {
  // coding
}
// .....
if (role === 2) {
  // coding
}
很多人会直接把 1,2写到页面中，其实这样不利于维护，你想想如果以后role改了标准，那你不是得全局去修改，那万一要是改漏了咋办？所以可以使用enum去解决这个问题，我建议一个模块应该都要有一个types.ts文件，用来存放此模块的ts类型。这样我们以后修改只需要改一处即可~

// types.ts
export enum RoleType {
  Admin = 1,
  SuperAdmin = 2
}

// page
if (role === RoleType.Admin) {
  // coding
}
// .....
if (role === RoleType.SuperAdmin) {
  // coding
}
个人信息加密
大家通常会在登录后把个人信息存放在LocalStorage中，且是明文的。。。这其实是有很大的安全隐患的，假如被别有用心的人直接编辑修改，那会造成伪造权限进行操作的现象

http.post('/api/v1/login', params, (userInfo) => {
  localStorage.setItem('userInfo', userInfo)
})
我们应该对存储的个人信息进行加密，并且也需要在取值时进行解密

const USER_INFO_KEY = 'userInfo'


class UserInfoStroage {
  tasks: Record<> = {}
  get(key) {
    // 解密取值
  }
  set(value) {
    // 加密存储
    // 执行tasks
  }
  clear() {
    // 清除
  }
  subscribe(key, cb) {
    // 事件订阅，监听变化
    tasks[key] = cb
  }
}

export const uis = new UserInfoStroage()
这个事件订阅挺重要的，我们可能需要监听userInfo变化时去执行一些函数，就可以在这里进行订阅~

多传对象参数
很多人在写一个函数的时候，喜欢这么去定义

const fn = ({
  name,
  age,
  sex = '女'
}) => {
  // coding
}
其实这样定义函数，有时候让后面的开发者非常头疼，如果人家要拓展参数，那就得一定把前面的参数给传了才行，这样非常不利于维护，所以还是建议使用对象的传参形式，这样做的好处就是拓展性强，且你想传哪个就哪个，没必要因为其他参数而影响你想真正传的参数

const fn = (name, age, sex = '女') => {
  // coding
}
多用数据驱动视图
我看到一段代码，在模板中的代码，大概是这样的，大概就是渲染一个表格的数据

<tr>名称<tr>
<tr>性别<tr>
<tr>年龄<tr>

<tbody>
  <div v-for="let item of list">
    <td>{{ item.name }}</td>
    <td>{{ item.sex }}</td>
    <td>{{ item.age }}</td>
  </div>
</tbody>
其实我想说，框架具备数据驱动视图的能力，我们就应该去充分利用它，这样也比较方便维护啊，以后修改数据只需要在数据层去修改，而不用去过多关注视图层

// 数据层
colums = [
  {
    name: '名称',
    field: 'name'
  },
  {
    name: '性别',
    field: 'sex'
  },
  {
    name: '年龄',
    field: 'age'
  }
]
list = [.....]

// 视图层
<tr v-for="let column of colums">
  {{ column.name }}
</tr>

<tbody>
  <div v-for="let item of list">
    <td v-for="let column of colums">
      {{ item[column.field] }}
    </td>
  </div>
</tbody>
不要过多在模板中做逻辑
经常在模板中看到很多判断逻辑，分为多种情况

列表判断某些行不显示
权限判断某些节点不显示
<div v-for="let o of list" v-if="index === 1"></div>

<button v-if="role === 1 && name === 'xxx'"></button>
我想说，还是多把这些判断放在数据层处理，不要过多在视图层里去做逻辑判断，不然后期维护非常麻烦

// 数据层
const computedList = computed(() => {
  return list.filter((item) => 条件判断)
})
const showButton = computed(() => {
  return role === 1 && name === 'xxx'
})

// 视图层
<div v-for="let o of computedList" v-if="index === 1"></div>

<button v-if="showButton"></button>
不要用拼音去命名
不要用拼音，或者拼音缩写去命名，最好是使用英文驼峰去命名~



作者：前端开发爱好者

欢迎关注微信公众号 ：前端开发爱好者