[[421388]]

本文轉(zhuǎn)載自微信公眾號(hào)「前端GoGoGo」，作者Joel  。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端GoGoGo公眾號(hào)。

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

• 接口的返回值變了，要改一堆代碼。
• 升級(jí)了一個(gè)第三方庫(kù)，要改一堆代碼。
• 某個(gè)組件的內(nèi)部實(shí)現(xiàn)變了，要改一堆代碼。

如何在遇到這種情況的時(shí)候，減少前端代碼的改動(dòng)呢?我分享給大家 2 個(gè)技巧：

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

降低代碼間的耦合

耦合指模塊間關(guān)聯(lián)的程度。模塊之間的關(guān)聯(lián)越多，其耦合性越強(qiáng)，那么獨(dú)立性也就越差了。

高耦合的代碼，會(huì)出現(xiàn)一處改，處處改的情況。高耦合的代碼，模塊之間的聯(lián)系，就像一團(tuán)亂碼。

解藕，就是避免對(duì)模塊內(nèi)部具體實(shí)現(xiàn)的依賴。

下面我們來看一些具體的耦合場(chǎng)景，以及對(duì)應(yīng)的解藕方案。

耦合 DOM

直接操作 DOM，是耦合的 DOM 的。當(dāng) DOM 結(jié)構(gòu)發(fā)生變化時(shí)，操作代碼也要跟著變。下面是顯示用戶名的代碼：

HTML:

用戶名：

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

JavaScript:

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

當(dāng)顯示用戶名的 id 變成其他時(shí)， JavaScript 也要變化。

解藕方法

Vue, React 之列的框架，聲明了 數(shù)據(jù) 和 視圖 的關(guān)系，不會(huì)耦合 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> 
  ) 
} 

耦合其他模塊的方法或?qū)傩?/h3>

以組件為例，當(dāng)父組件主動(dòng)調(diào)用子組件方法，會(huì)造成耦合。例如，父組件要讓子組件獲得焦點(diǎn)。用 React 實(shí)現(xiàn)的代碼如下:

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

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

解藕方法

耦合方法的解決方案1

子組件監(jiān)聽屬性的變化，來響應(yīng)父組件的主動(dòng)調(diào)用。改寫代碼如下：

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

耦合方法的解決方案2

用發(fā)布訂閱模式。父組件需要主動(dòng)調(diào)用子組件方法時(shí)，觸發(fā)個(gè)自定義事件，子組建監(jiān)聽該自定義事件。

耦合屬性的解決方案1

將耦合的屬性放到父組件來維護(hù)，子組件改屬性時(shí)，通知父組件。如：

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

耦合屬性的解決方案2

父組件要獲得子組件的內(nèi)部屬性時(shí)，改變某個(gè)屬性。子組件監(jiān)聽到該屬性的變化后，執(zhí)行父組件獲取值的回調(diào)函數(shù)。

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

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

業(yè)務(wù)代碼和依賴代碼之間加適配層

如果業(yè)務(wù)代碼中有多處代碼直接調(diào)用了外部依賴，如果依賴項(xiàng)發(fā)生了變化，調(diào)用的地方也要改。比如：接口的請(qǐng)求和響應(yīng)改了;升級(jí)的第三方庫(kù)的 API 發(fā)生了變化。

解決這個(gè)問題，可以在業(yè)務(wù)代碼和依賴代碼之間加適配層。當(dāng)依賴項(xiàng)改后，只需要改適配層代碼，不需要改業(yè)務(wù)代碼。

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

1. 代碼中有多處代碼直接調(diào)用了外部依賴。
2. 外部依賴變動(dòng)的可能性比較大。

常見的外部依賴有：配置項(xiàng)，接口，第三方庫(kù)，全局 API。我們一個(gè)個(gè)來看。

分類配置項(xiàng)

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

export const API_HOST = '/api' // 接口前綴 
export const PAGE_LIMIT = 10 // 分頁(yè)時(shí)，一頁(yè)的條數(shù) 

適配接口的請(qǐng)求參數(shù)和響應(yīng)結(jié)果

一般會(huì)加個(gè)適配層來統(tǒng)一對(duì)接口的請(qǐng)求參數(shù)和響應(yīng)。適配層在請(qǐng)求里加 token 之類的，在響應(yīng)里處理通用報(bào)錯(cuò)。如：

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

對(duì)具體接口做格式化請(qǐng)求參數(shù)和接口的返回。

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

適配第三方庫(kù)

如果是第三方組件，可以用個(gè)組件代理第三庫(kù)的組件。如：

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

如果是一個(gè)函數(shù)，可以用一個(gè)函數(shù)來代理。如：

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

適配全局 API

如果我們大量代碼用了瀏覽器的可能會(huì)被廢棄的實(shí)驗(yàn)性的 API?？梢宰鲞@樣的配置:

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

總結(jié)

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