前端開發中的時候,很容易把 API 事件寫在同一個 component 裡面,大部分人會進行封裝,讓傳送 API 的方法變得更簡單
先前碰到同事裡用前端框架系統 Vue 的時候,則是把 API 放到 Vuex 裡面,之前看過 React 裡面,如果上下層傳遞有點過於遙遠或是複雜,通常會用 State 來管控, Vue 使用 Vuex ,React 則是用 redux 來表達貫穿這個元件的參數。
不過正如上面說的 Vuex 跟 redux 都是用來放狀態的,如果拿來放其他東西,並不是說不可以,只是如果在物件導向的裡面中,這樣就違反了 單一功能原則的項目,狀態管理就不再是狀態管理。
自從看了一點 Clean Code的書之後,開始針對 Clean Architecture 很感興趣,原本我主要寫後端跟一點點的前端,開始把後端架構邏輯設計延伸到了前端,開始修正前端同事的程式碼。
Clean Architecture:

回到正題 要實現乾淨的架設設計,首先先把專案中的 Vuex 裡面,包了一堆 API 的模式給抽離開來,去年我重新理解一次 新的 JavaScript 的時候,發現 ES6 有個相當好用的東西叫做 Classes 如果你懂一點物件導向就可以知道這個東西是用來做什麼的。
實際操作了一下真的讓我感動到哭,很久很久以前操作 JavaScript 的時候要實現到類似的事情必須要 function 一層包了一層才有可能實現這件事情,現在原生 JS 支援把這個東西當成特別的 function 讓你使用更簡潔的方式建立物件,以及處理繼承,真的相當方便
這邊先設計一個範例,採用 https://reqres.in 來顯示 REST API 的方式,這個資源是隨意 Google到的,要套用現有的 資源應該也不是問題。