Writing Reusable Code: Principles and Practices for Front-End Development

Reusable code refers to a single piece of code that can be used across similar business scenarios. It reduces duplicated effort, eases maintenance, and minimizes the risk of missed changes when requirements evolve.

To write reusable code, the key is to identify and separate the parts that can be reused.

1. UI Presentation – UI components (HTML/CSS) that do not contain data fetching or event handling can be abstracted into reusable display components. Component libraries such as Ant Design provide many of these. Below is a React example of a reusable news‑list component:

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 (
{list.map(item => (
))}
)
}

export default React.memo(NewsList)

2. Interface Calls – Two reusable aspects exist: generic request/response handling and the concrete API calls.

Common handling (e.g., adding a token, converting error codes) can be centralized with Axios interceptors:

// Request interceptor
axios.interceptors.request.use(...)

// Response interceptor
axios.interceptors.response.use(...)

Specific API functions are usually placed in a service file:

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

3. Business Flow – Many backend‑admin list pages share the same flow: fetch data on page entry, fetch on search, paginate, etc. In Vue 3 this can be encapsulated with a custom hook (Composition API):

import { onMounted, reactive, ref, Ref } from 'vue'

export interface Params {
  url: string
  searchConditions: Record
}

interface Return
{
  searchConditions: Record
resetConditions: () => void
  pagination: Record
fetchList: (isReset: boolean) => void
  list: Ref
isLoading: Ref
}

function useList
>({ url, searchConditions: initCondition }: Params): Return
{
  const searchConditions = reactive({ ...initCondition })
  const pagination = reactive({ pageSize: 10 })
  const list = ref
([]) as Ref
const isLoading = ref(false) as Ref
const fetchList = (isReset: boolean = false): void => { /* ... */ }

  // Load on component mount
  onMounted(() => {
    fetchList()
  })

  return { searchConditions, pagination, fetchList, list, isLoading }
}

export default useList

State management libraries (Redux, Mobx, Context API for React; Vuex for Vue) are used to store shared data such as user info or permissions.

Utility functions that are unrelated to business logic—e.g., date formatting, unique‑id generation—can be centralized with libraries like Lodash or Moment.js.

In summary, writing reusable front‑end code involves recognizing reusable parts in UI, API calls, business flow, data handling, and utility functions, and extracting them into separate modules or components. The next level of code quality is refactorable (可重构的) code, which will be covered in a future article.