如何減少前端代碼的改動

作者： Joel 2021-09-03 08:21:20

開發前端

耦合指模塊間關聯的程度。模塊之間的關聯越多，其耦合性越強，那么獨立性也就越差了。高耦合的代碼，會出現一處改，處處改的情況。高耦合的代碼，模塊之間的聯系，就像一團亂碼。

[[421388]]

本文轉載自微信公眾號「前端GoGoGo」，作者Joel 。轉載本文請聯系前端GoGoGo公眾號。

工作中，大家可能會碰到這樣的情況：

接口的返回值變了，要改一堆代碼。
升級了一個第三方庫，要改一堆代碼。
某個組件的內部實現變了，要改一堆代碼。

如何在遇到這種情況的時候，減少前端代碼的改動呢?我分享給大家 2 個技巧：

降低代碼間的耦合。
業務代碼和依賴代碼之間加適配層。
下面我們具體來看~

降低代碼間的耦合

耦合指模塊間關聯的程度。模塊之間的關聯越多，其耦合性越強，那么獨立性也就越差了。

高耦合的代碼，會出現一處改，處處改的情況。高耦合的代碼，模塊之間的聯系，就像一團亂碼。

解藕，就是避免對模塊內部具體實現的依賴。

下面我們來看一些具體的耦合場景，以及對應的解藕方案。

耦合 DOM

直接操作 DOM，是耦合的 DOM 的。當 DOM 結構發生變化時，操作代碼也要跟著變。下面是顯示用戶名的代碼：

HTML:

用戶名：

用戶名：<div id="user-name"></div>

JavaScript:

const userName = ... 
document.querySelector('#user-name').textContent = userName

當顯示用戶名的 id 變成其他時， JavaScript 也要變化。

解藕方法

Vue, React 之列的框架，聲明了數據和視圖的關系，不會耦合 DOM。

用 Vue：

<template> 
  用戶名：<div>{{userName}}</div> 
</template> 
<script> 
new Vue({ 
  ... 
  data: { 
    userName: ... 
  } 
}) 
</script>

用 React:

function App () { 
  const [userName, setUserName] = useState(...) 
 
  return ( 
    <div> 
      用戶名：<div>{userName}</div> 
    </div> 
  ) 
}

耦合其他模塊的方法或屬性

以組件為例，當父組件主動調用子組件方法，會造成耦合。例如，父組件要讓子組件獲得焦點。用 React 實現的代碼如下:

<button onClick={() => inputRef.focus()}>點我獲得焦點</button> 
// 子組件 
<MyInput ref={inputRef}>

如果子組件獲得焦點的方法簽名發生了變化，上面的代碼就失效了。同樣的，父組件獲取子組件的內部屬性，也會造成耦合的問題。

解藕方法

耦合方法的解決方案1

子組件監聽屬性的變化，來響應父組件的主動調用。改寫代碼如下：

const [controlFocus, setControlFocus] = useState(0); 
return ( 
  <> 
    <button onClick={() => setControlFocus(Date.now())}>點我獲得焦點</button> 
    <MyInput controlFocus={controlFocus}> 
  </> 
)

耦合方法的解決方案2

用發布訂閱模式。父組件需要主動調用子組件方法時，觸發個自定義事件，子組建監聽該自定義事件。

耦合屬性的解決方案1

將耦合的屬性放到父組件來維護，子組件改屬性時，通知父組件。如：

const [value, setValue] = useState(0); 
return ( 
  <Comp value={value} onChange={setValue} /> 
)

耦合屬性的解決方案2

父組件要獲得子組件的內部屬性時，改變某個屬性。子組件監聽到該屬性的變化后，執行父組件獲取值的回調函數。

const [value, setValue] = useState(0); 
const [controlGetValue, setControlGetValue] = useState(0); 
 
return ( 
  <Comp onChange={setValue} controlGetValue={controlGetValue} /> 
)

上面代碼中，父組件要獲取子組件內部的 value 值，只需改 controlGetValue 的值即可。

業務代碼和依賴代碼之間加適配層

如果業務代碼中有多處代碼直接調用了外部依賴，如果依賴項發生了變化，調用的地方也要改。比如：接口的請求和響應改了;升級的第三方庫的 API 發生了變化。

解決這個問題，可以在業務代碼和依賴代碼之間加適配層。當依賴項改后，只需要改適配層代碼，不需要改業務代碼。

注意：增加適配層本身會增加代碼的復雜度。因此，不要過度的加。一般在滿足以下 2 個條件的情況下加：

代碼中有多處代碼直接調用了外部依賴。
外部依賴變動的可能性比較大。

常見的外部依賴有：配置項，接口，第三方庫，全局 API。我們一個個來看。

分類配置項

將配置從邏輯中分離出來，寫成配置文件。如

export const API_HOST = '/api' // 接口前綴 
export const PAGE_LIMIT = 10 // 分頁時，一頁的條數

適配接口的請求參數和響應結果

一般會加個適配層來統一對接口的請求參數和響應。適配層在請求里加 token 之類的，在響應里處理通用報錯。如：

const request = (options) => { 
  // 添加請求攔截器 
  axios.interceptors.request.use(...) 
  // 添加響應攔截器 
  axios.interceptors.response.use(...) 
  return axios 
}

對具體接口做格式化請求參數和接口的返回。

export const formatFromServer = res => ... 
export const formatToServer = data => ...

適配第三方庫

如果是第三方組件，可以用個組件代理第三庫的組件。如：

import { Sortable } from "react-sortablejs" 
function Sort(props) { 
  return ( 
    <Sortable 
      {...props} 
      ... 
    > 
      ... 
    </Sortable> 
  ) 
}

如果是一個函數，可以用一個函數來代理。如：

import xxx from 'xxx' 
function myXxx(...args) { 
  return xxx(...args) 
}

適配全局 API

如果我們大量代碼用了瀏覽器的可能會被廢棄的實驗性的 API。可以做這樣的配置:

const someAPI = () => { 
  if(window.someAPI) { 
    return someAPI 
  } 
  // 不支持的情況。 
  return () => ... 
}

總結

外部變化后，要減少前端代碼的改動，主要靠降低代碼的耦合和增加適配代碼。但也不要過度使用哦~

責任編輯：武曉燕來源：前端GoGoGo

前端代碼模塊