日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
用戶(hù)名：

 
 
 
 

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

 
 
 
 

  
  
  
  
function App () {
  
  
  
  
  const [userName, setUserName] = useState(...)
  
  
  
  

  
  
  
  
  return (
  
  
  
  
    

  
  
  
  
      用戶(hù)名：
{userName}
  
  
  
  
    

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

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

 
 
 
 

  
  
  
  
 inputRef.focus()}>點(diǎn)我獲得焦點(diǎn)
  
  
  
  
// 子組件
  
  
  
  

 
 
 
 

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

解藕方法

耦合方法的解決方案1

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

 
 
 
 

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

耦合方法的解決方案2

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

耦合屬性的解決方案1

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

 
 
 
 

  
  
  
  
const [value, setValue] = useState(0);
  
  
  
  
return (
  
  
  
  
  
  
  
  
  
)
 
 
 
 

耦合屬性的解決方案2

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

 
 
 
 

  
  
  
  
const [value, setValue] = useState(0);
  
  
  
  
const [controlGetValue, setControlGetValue] = useState(0);
  
  
  
  

  
  
  
  
return (
  
  
  
  
  
  
  
  
  
)
 
 
 
 

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

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

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

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

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

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

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

分類(lèi)配置項(xiàng)

將配置從邏輯中分離出來(lái)，寫(xiě)成配置文件。如

 
 
 
 

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

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

一般會(huì)加個(gè)適配層來(lái)統(tǒng)一對(duì)接口的請(qǐng)求參數(shù)和響應(yīng)。適配層在請(qǐng)求里加 token 之類(lèi)的，在響應(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 (
  
  
  
  
    
  
  
  
  
      {...props}
  
  
  
  
      ...
  
  
  
  
    >
  
  
  
  
      ...
  
  
  
  
    
  
  
  
  
  )
  
  
  
  
}
 
 
 
 

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

 
 
 
 

  
  
  
  
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)，主要靠 降低代碼的耦合 和 增加適配代碼。但也不要過(guò)度使用哦~