CodeReview 中最容易被吐槽的 7 個(gè)點(diǎn)！?。?/font>

常量提取
請(qǐng)看如下代碼，可能很多人都是這么寫代碼的，在頁面中瘋狂的去使用常量，而且非常分散，這樣做的壞處就是，你以后維護(hù)的成本非常高，你得到處找，然后去修改。非常累~

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

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

localStorage.setItem('token', 'xxxxxx')
最好就是一個(gè)模塊有一個(gè) constants.js 文件，用來統(tǒng)一存放此模塊的一些常量，并且要使用大駝峰命名去定義，千萬不要嫌麻煩！

// constants.js

const TIME_OUT = 10 * 1000;
const REQUEST_URL = '/api/v1/xxxxxx';
const TOKEN_KEY = 'token'
合理使用 enum
我們來看下面一段代碼，比如一個(gè)頁面中有大量的判斷，且其實(shí)條件都是一樣的，比如：

if (role === 1) {
  // coding
}
// .....
if (role === 2) {
  // coding
}
// .....
if (role === 1) {
  // coding
}
// .....
if (role === 2) {
  // coding
}
很多人會(huì)直接把 1,2寫到頁面中，其實(shí)這樣不利于維護(hù)，你想想如果以后role改了標(biāo)準(zhǔn)，那你不是得全局去修改，那萬一要是改漏了咋辦？所以可以使用enum去解決這個(gè)問題，我建議一個(gè)模塊應(yīng)該都要有一個(gè)types.ts文件，用來存放此模塊的ts類型。這樣我們以后修改只需要改一處即可~

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

// page
if (role === RoleType.Admin) {
  // coding
}
// .....
if (role === RoleType.SuperAdmin) {
  // coding
}
個(gè)人信息加密
大家通常會(huì)在登錄后把個(gè)人信息存放在LocalStorage中，且是明文的。。。這其實(shí)是有很大的安全隱患的，假如被別有用心的人直接編輯修改，那會(huì)造成偽造權(quán)限進(jìn)行操作的現(xiàn)象

http.post('/api/v1/login', params, (userInfo) => {
  localStorage.setItem('userInfo', userInfo)
})
我們應(yīng)該對(duì)存儲(chǔ)的個(gè)人信息進(jìn)行加密，并且也需要在取值時(shí)進(jìn)行解密

const USER_INFO_KEY = 'userInfo'


class UserInfoStroage {
  tasks: Record<> = {}
  get(key) {
    // 解密取值
  }
  set(value) {
    // 加密存儲(chǔ)
    // 執(zhí)行tasks
  }
  clear() {
    // 清除
  }
  subscribe(key, cb) {
    // 事件訂閱，監(jiān)聽變化
    tasks[key] = cb
  }
}

export const uis = new UserInfoStroage()
這個(gè)事件訂閱挺重要的，我們可能需要監(jiān)聽userInfo變化時(shí)去執(zhí)行一些函數(shù)，就可以在這里進(jìn)行訂閱~

多傳對(duì)象參數(shù)
很多人在寫一個(gè)函數(shù)的時(shí)候，喜歡這么去定義

const fn = ({
  name,
  age,
  sex = '女'
}) => {
  // coding
}
其實(shí)這樣定義函數(shù)，有時(shí)候讓后面的開發(fā)者非常頭疼，如果人家要拓展參數(shù)，那就得一定把前面的參數(shù)給傳了才行，這樣非常不利于維護(hù)，所以還是建議使用對(duì)象的傳參形式，這樣做的好處就是拓展性強(qiáng)，且你想傳哪個(gè)就哪個(gè)，沒必要因?yàn)槠渌麉?shù)而影響你想真正傳的參數(shù)

const fn = (name, age, sex = '女') => {
  // coding
}
多用數(shù)據(jù)驅(qū)動(dòng)視圖
我看到一段代碼，在模板中的代碼，大概是這樣的，大概就是渲染一個(gè)表格的數(shù)據(jù)

<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>
其實(shí)我想說，框架具備數(shù)據(jù)驅(qū)動(dòng)視圖的能力，我們就應(yīng)該去充分利用它，這樣也比較方便維護(hù)啊，以后修改數(shù)據(jù)只需要在數(shù)據(jù)層去修改，而不用去過多關(guān)注視圖層

// 數(shù)據(jù)層
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>
不要過多在模板中做邏輯
經(jīng)常在模板中看到很多判斷邏輯，分為多種情況

列表判斷某些行不顯示
權(quán)限判斷某些節(jié)點(diǎn)不顯示
<div v-for="let o of list" v-if="index === 1"></div>

<button v-if="role === 1 && name === 'xxx'"></button>
我想說，還是多把這些判斷放在數(shù)據(jù)層處理，不要過多在視圖層里去做邏輯判斷，不然后期維護(hù)非常麻煩

// 數(shù)據(jù)層
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>
不要用拼音去命名
不要用拼音，或者拼音縮寫去命名，最好是使用英文駝峰去命名~



作者：前端開發(fā)愛好者


歡迎關(guān)注微信公眾號(hào) ：前端開發(fā)愛好者