关于前端:代码质量第-2-层-可重用的代码

点击一键订阅《云荐大咖》专栏，获取官网举荐精品内容，学技术不迷路！

可重用的代码能够缩小重复劳动。一个软件中，会有很多相似的业务场景。将这些场景形象成可重用的代码。开发新性能时，重用代码可缩小重复劳动。

可重用的代码能够缩小因需要变动，导致屡次改变和漏改的状况。试想，要批改全站提交按钮的色彩，如果全站有 100 个蕴含提交按钮的页面，每个页面的按钮的款式都没复用，这改变量和漏改的危险都很大。如果做成可重用的，则只需改变一处。

代码块的职责越多，越难被复用。写出可重用的代码就是：辨认，拆散出可复用的局部。

思考这样的场景：代码块 A 的性能是获取接口数据，并渲染 UI。代码块 B 的 UI 和 A 一样，但获取的接口数据不一样。代码块 C 获取的数据和 A 一样，但 UI 和 A 不一样。A，B，C 之间的代码都不能被复用。

要改成可复用的代码，就是将可复用的 UI，获取接口数据的代码独立进去。

上面，咱们来看些常见的可复用的局部和复用办法。

UI 展现为外观的展现，蕴含：HTML 和 CSS。不蕴含数据的获取和事件处理。

用组件能够实现 UI 展现代码的复用。这样的组件被称为展现组件。数据和事件处理通过属性传入。Ant Design 之类的组件库里的组件均为展现组件。如下是 React 实现的新闻列表：

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<INewsListProps> = ({list, onItemClick}) => {
  return (<div className={s.list}>
      {
        list.map(item => (
          <Item
            key={item.id}
            onClick={onItemClick}
            payload={item}
          />
        ))
      }
    </div>
  )
}

export default React.memo(NewsList)

接口调用有两局部能够复用：

接口申请和响应的通用解决。
具体接口的调用。

接口调用时，经常要做一些通用的解决。比方：

前后端拆散的网站，要在接口的申请头中要加 token 来标识用户。
接口报错时，要将错误码转化成对用户敌对的错误信息。
用 axios 这么解决：

// 申请拦截器
axios.interceptors.request.use(...)
// 响应拦截器
axios.interceptors.response.use(...)

接口调用代码个别会放在一个文件中，如 service.js：

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

接口调用，还有 Loading 状态治理，防抖，节流，谬误重试，缓存等场景。React 能够用 useRequest，Vue 也有相似的轮子。

很多业务流程是相似的，能够被复用。比方，治理后盾列表页的业务流程都相似是这样的：

进入页面时，获取列表数据。
点搜寻按钮，依据以后的查问条件，获取列表数据。
点分页，获取指定页的列表。
自定义 hooks(Vue3 中叫组合式 API) 反对外部的状态治理和生命周期。因而，能够用 hooks 来封装业务流程。上面是用 Vue3 的组合式 API 来封装治理后盾的列表页的实现：

import {onMounted, reactive, ref, Ref} from 'vue'
export interface Params {
  url: string
  searchConditions: Record<string, any>
}

interface Return<T> {
  searchConditions: Record<string, any>
  resetConditions: () => void
  pagination: Record<string, any>
  fetchList: (isReset: boolean) => void
  list: Ref<T[]>
  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<T[]>([]) as Ref<T[]>
  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。

有些数据指会被多个中央用到。如：登录的用户信息，权限数据。

能够用状态治理库来治理这些数据。React 状态治理个别用 Redux，Mobx 或 Context API。Vue 个别用 Vuex。

工具函数是与业务无关的。如：格式化日期，生成惟一的 id 等。Lodash 和 moment.js 蕴含了很多的工具办法。

要写出可重用的代码，实质就是辨认和拆散出可复用的局部。前端能够从 UI 展现，接口调用，业务流程，数据，工具函数中找出可复用的局部。

代码品质的下一档次就是：可重构的代码。我会在下一篇文章中介绍。

聊聊代码品质 –《学得会，抄得走的晋升前端代码品质办法》前言
代码品质第五层 – 只是实现了性能
代码品质第四层 – 强壮的代码
代码品质第三层 – 可读的代码

《云荐大咖》是腾讯云加社区精品内容专栏。云荐官特邀行业佼者，聚焦于前沿技术的落地及实践实际之上，继续为您解读云时代热点技术、摸索行业倒退新机。点击一键订阅，咱们将为你定期推送精品内容。

关于前端:代码质量第-2-层-可重用的代码

如何写出可重用的代码？

一、UI 展现

二、接口调用

三、接口申请和响应的通用解决

四、具体接口的调用

五、业务流程

六、数据

七、工具函数

总结

金伟强往期精彩文章举荐：