從前端框架看「關注點分離」

其實本來這一週是要介紹 Vue 的元件概念與生命週期，於是我想提及關注點分離概念後再來介紹。但礙於兩者加起來篇幅太長所以本週就只先介紹何謂關注點分離。

關注點分離

「關注點分離」的意思是指「每一個模組各自有獨立的關注點」，即意味著每個模組只需要專注在一個焦點上，不需要被不同的概念分心、亦或者是不需要到分散的檔案中進行修改。以下介紹幾個不同的分離方式：

以技術為單位分離 — Angular

Angular 也曾經被我們介紹過（雖然最後斷尾了QQ），Angular 把 html / css / js 不同的技術語言分開並放置在不同的檔案之中，希望開發者一次只關注一種技術。

以視覺主軸分離 — ReactJS

ReactJS 則是以「視覺」為主體分離，提出了 JSX 概念，將 html 跟 JS 混合在一起，並組成了元件（Compoment）。然而 JSX 剛開始提出的時候因為技術被混合在一起而被認為不符合關注點分離。但仔細一想，過往的關注點分離僅是讓「技術」被分離，當我們要去修改一個模組的時候，必須到不同的檔案當中去修改，而不是讓真正重要的「畫面」作為關注的分離點。

所以 React 強調的是以「視覺元件」分離，而不是技術。

以視覺為主體，但裡面仍以技術為單位分離 — VueJS

Vue 同時以視覺「元件」為主體，將不同技術放於同一個檔案之中。而在每個檔案之中又將「技術」分成了不同區塊，例如將 JS / HTML / CSS 分別以 <script> / <template> / <style> 分割。

這樣的分法，在 high-level 達成了「視覺」分離，在 low-level 達成了「技術」分離 ，也能說是兩者的中和。

結論

1. 過去 Angular 等框架以「技術」進行關注點分離
2. Vue 以及 React 則以「畫面、視覺元件」進行關注點分離
3. 技術或是一些概念其實沒有絕對的好壞，使用哪一種模式或技術都取決於當下的情境，例如：開發團隊的規模或共識、系統的架構，而作為個人開發者很大一部份就是取決於個人的偏好、習慣等，只要是能解決需求與問題的技術與概念，就是合適的。

Originally published at https://www.notes-hz.com.