耦合 (coupling)


Posted by mijouhsieh on 2023-03-22

coupling /ˈkʌp.lɪŋ/

降低耦合性 better

耦合 (coupling)是指「和其他程式碼有關係」,一支函式若用愈多外部資料,那它的耦合性就愈高,反之,一支函式愈「獨立」,它的耦合性就愈低。而「低耦合性」是品質良好的程式碼的指標之一,通常表示可讀性及可維護性會比較好。

情境:

  • movies變數是有80個資料的陣列。
  • 在函式renderMovieList的 參數 及 { } 中,放引數data,而不是movies。=> 降低耦合性! 讓函式可以重複使用,下次參數可帶入導演資料等等。
function renderMovieList( **data** ) {
  let rawHTML = ''
  **data**.forEach(item => {
    rawHTML += ...
  })
}

renderMovieList(movies)

雖然可以直接在 renderMovieList(movies) 函式中取到 movies 這個變數,但這裡選擇用參數的方式傳入來降低耦合性,因此,函式 renderMovieList 就不會被特定一組資料綁死,如果未來有其他地方需要做類似的 DOM 操作,只要改變傳入的參數就能重複利用這個函式。

簡言之,函式盡量不要依賴外部的資料,愈獨立愈好。


#coupling #耦合性







Related Posts

React-[入門篇]-加入更多元件到React Pizza專案

React-[入門篇]-加入更多元件到React Pizza專案

AI輔導室|暈染風格文字

AI輔導室|暈染風格文字

Day05 從 Hash Anchor 看原生 History API (上)

Day05 從 Hash Anchor 看原生 History API (上)


Comments