代碼質(zhì)量第2層-可重用的代碼！

導語?|?騰訊云加社區(qū)精品內(nèi)容欄目《云薦大咖》，特邀行業(yè)佼者，聚焦前沿技術(shù)的落地與理論實踐，持續(xù)為您解讀云時代熱點技術(shù)，探秘行業(yè)發(fā)展新機。

可重用的代碼指：在相似業(yè)務場景下，用的是同一份代碼。

可重用的代碼可以減少重復勞動。一個軟件中，會有很多類似的業(yè)務場景。將這些場景抽象成可重用的代碼。開發(fā)新功能時，重用代碼可減少重復勞動。

可重用的代碼可以減少因需求變動，導致多次改動和漏改的情況。試想，要修改全站提交按鈕的顏色，如果全站有100個包含提交按鈕的頁面，每個頁面的按鈕的樣式都沒復用，這改動量和漏改的風險都很大。如果做成可重用的，則只需改動一處。

代碼塊的職責越多，越難被復用。寫出可重用的代碼就是：識別，分離出可復用的部分。

考慮這樣的場景：代碼塊A的功能是獲取接口數(shù)據(jù)，并渲染UI。代碼塊B的UI和A一樣，但獲取的接口數(shù)據(jù)不一樣。代碼塊C獲取的數(shù)據(jù)和A一樣，但UI和A不一樣。A，B，C之間的代碼都不能被復用。

要改成可復用的代碼，就是將可復用的UI，獲取接口數(shù)據(jù)的代碼獨立出來。

下面，我們來看些常見的可復用的部分和復用方法。

（一）UI展示

UI展示為外觀的展示，包含：HTML和CSS。不包含數(shù)據(jù)的獲取和事件處理。

用組件可以實現(xiàn)UI展示代碼的復用。這樣的組件被稱為展示組件。數(shù)據(jù)和事件處理通過屬性傳入。Ant Design之類的組件庫里的組件均為展示組件。如下是React實現(xiàn)的新聞列表：

import React from 'react'import s from './style.scss'import Item, {IItem} from './item'
export interface INewsListProps {  list: IItem[],  onItemClick: (id: number) => void}
const NewsList: FC = ({ list, onItemClick }) => {  return (    <div className={s.list}>      {        list.map(item => (          <Item            key={item.id}            onClick={onItemClick}            payload={item}          />        ))      }    div>  )}
export default React.memo(NewsList)

（二）接口調(diào)用

接口調(diào)用有兩部分可以復用：

• 接口請求和響應的通用處理。

• 具體接口的調(diào)用。

• 接口請求和響應的通用處理

接口調(diào)用時，常常要做一些通用的處理。比如：

• 前后端分離的網(wǎng)站，要在接口的請求頭中要加token來標識用戶。

• 接口報錯時，要將錯誤碼轉(zhuǎn)化成對用戶友好的錯誤信息。

用axios這么處理：

// 請求攔截器axios.interceptors.request.use(...)// 響應攔截器axios.interceptors.response.use(...)

• 具體接口的調(diào)用

接口調(diào)用代碼一般會放在一個文件中，如service.js：

export const fetchList = ...export const fetchDetail = ...export const createItem = ...export const updateItem = ...export const deleteItem = ...

接口調(diào)用，還有Loading狀態(tài)管理，防抖，節(jié)流，錯誤重試，緩存等場景。React可以用useRequest，Vue也有類似的輪子。

（二）業(yè)務流程

很多業(yè)務流程是類似的，可以被復用。比如，管理后臺列表頁的業(yè)務流程都類似是這樣的：

• 進入頁面時，獲取列表數(shù)據(jù)。

• 點搜索按鈕，根據(jù)當前的查詢條件，獲取列表數(shù)據(jù)。

點分頁，獲取指定頁的列表。

自定義hooks(Vue3中叫組合式API) 支持內(nèi)部的狀態(tài)管理和生命周期。因此，可以用hooks來封裝業(yè)務流程。下面是用Vue3的組合式API來封裝管理后臺的列表頁的實現(xiàn)：

import { onMounted, reactive, ref, Ref } from 'vue'export interface Params {  url: string  searchConditions: Record<string, any>}
interface Return {  searchConditions: Record<string, any>  resetConditions: () => void  pagination: Record<string, any>  fetchList: (isReset: boolean) => void  list: Ref  isLoading: Ref<boolean>}
function useList<T extends Record<string, any>> ({  url,  searchConditions: initCondition}: Params): Return<T> {  const searchConditions = reactive({...initCondition})  const pagination = reactive({    pageSize: 10  })  const list = ref([]) as Ref  const isLoading = ref(false) as Ref<boolean>  // isReset 為 true 表示搜第一頁。  const fetchList = (isReset: boolean = false): void => ...
  // 進入頁面  onMounted(() => {    fetchList()  })
  return {    searchConditions,    pagination,    fetchList,    list,    isLoading,  }}
export default useList

推薦個hooks工具庫：ahooks。Vue版：ahooks-vue。

（三）數(shù)據(jù)

有些數(shù)據(jù)指會被多個地方用到。如：登錄的用戶信息，權(quán)限數(shù)據(jù)。

可以用狀態(tài)管理庫來管理這些數(shù)據(jù)。React狀態(tài)管理一般用Redux、Mobx或Context API。Vue一般用Vuex。

（四）工具函數(shù)

工具函數(shù)是與業(yè)務無關(guān)的。如：格式化日期，生成唯一的id等。Lodash和 moment.js包含了很多的工具方法。

要寫出可重用的代碼，本質(zhì)就是識別和分離出可復用的部分。前端可以從UI展示，接口調(diào)用，業(yè)務流程，數(shù)據(jù)，工具函數(shù)中找出可復用的部分。

代碼質(zhì)量的下一層次就是：可重構(gòu)的代碼。我會在下一篇文章中介紹。

代碼質(zhì)量第3層-可讀的代碼！

代碼質(zhì)量第4層——健壯的代碼！

代碼質(zhì)量第5層-只是實現(xiàn)了功能

聊聊代碼質(zhì)量-《學得會，抄得走的提升前端代碼質(zhì)量方法》前言