避免使用默認(rèn)導(dǎo)出

• 默認(rèn)導(dǎo)出需要自己重命名冀宴，會(huì)讓人混淆牺蹄。
• 改成這樣：

import  {  HomeApi  }  from  "./home.api";

使用 index.js 統(tǒng)一文件夾下的導(dǎo)出稠歉。

• 示例：

import  { homeActions }  from  "../../home/home-utils/home.actions";

import  { routeUtils }  from  "../../../utils/route.utils";

import  { homeTypes }  from  "../../home/home.typings";

• 改成這樣：

import  { homeActions, homeTypes }  from  "../../home";

import  { routeUtils }  from  "../../../utils";

同類(lèi)處理函數(shù)包裝成對(duì)象

• 示例：

// utils.js

const  formatTimeSlots  =  ()  =>  {};

const  updateTimeSlots  =  ()  =>  {};

const  createTimeSlots  =  ()  =>  {};

//file.js

import  { formatTimeSlots, createTimeSlots, updateTimeSlots }  from  "./utils";

• 改成這樣：

// utils.js

const utils =  {

  formatTimeSlots:  ()  =>  {},

  updateTimeSlots:  ()  =>  {},

  createTimeSlots:  ()  =>  {},

};

//file.js

import  { utils }  from  "./utils";

• 或者可以這么導(dǎo)入：

import  *  as utils from  "./utils";

跨層級(jí)太多盡量使用別名

• 示例：

import  {  User  }  from  "../../../scenes/Account/User";

import  {  THEME_COLOR  }  from  "../../constants/theme";

import  { getUser }  from  "../services/userServices";

• 改成這樣：

import  {  User  }  from  "@scenes/Account/User";

import  {  THEME_COLOR  }  from  "@constants/theme";

import  { getUser }  from  "@services/userServices";

布爾值變量方法需要以 is 開(kāi)頭

const isCompleted =  true;

const  isValidUser  =  (user)  =>  !!user;

常量變量總是大寫(xiě)

const  NEW_MODE  =  "New Mode";

const  GOOGLE_KEY  =  "1da541ac298";

const  IS_PRODUCTION  = process.env.NODE_ENV  ===  "production";

使用少量變量讓可讀性更好

• 示例：

const result =  (income - expenses)  - income > expenses *  2  ? income *  0,25:  0;

• 改成這樣：

const value = income - expenses;

const isUseTaxes = income > expenses *  2;

const taxes = isUseTaxes ? income *  0,25  :  0;

const result = value - taxes;

盡量將對(duì)象解構(gòu)出來(lái)使用

• 示例：

setState({

 account:  `${response.user.name}  ${response.user.surname}`,

 photo: response.user.photo,

 options: response.options,

});

• 改成這樣：

const  { user, options }  = response;

// two times if needed

const  { name, surname, photo }  = user;

setState({

 account:  `${name}  ${surname}`,

 photo,

 options,

});

合理使用簡(jiǎn)短的三元表達(dá)式替代 if

• 示例：

if  (isCompleted)  {

  return  method();

}

return  null;

• 改成這樣：

return isCompleted ?  method()  :  null;

合理構(gòu)造對(duì)象來(lái)代替多個(gè) if

• 示例：

const response =  await api.fetchData();

if  (response.message  ===  "saved")  {

  /* ... */

}

if  (response.message  ===  "updated")  {

  /* ... */

}

if  (response.message  ===  "error")  {

  /* ... */

}

• 改成這樣：

  const responseHandleMap =  {

  saved:  ()  =>  /* ... */,

  updated:  ()  =>  /* ... */,

  error:  ()  =>  /* ... */

  }

  /* ... */

  const response =  await api.fetchData();

 responseHandleMap[response.message]();

使用 async / await 替代 then / catch

• 示例：

getUserInfo()

  .then(({ user, options })  =>  {

  /* ... */

  })

  .catch((e)  =>  {

  /* ... */

  });

• 改成這樣：

request  =  async  ()  =>  {

  try  {

  const  { user, options }  =  await  getUserInfo();

  /* ... */

  }  catch  (e)  {

  /* ... */

  }

};