其實本來這一週是要介紹 Vue 的元件概念與生命週期，於是我想提及關注點分離概念後再來介紹。但礙於兩者加起來篇幅太長所以本週就只先介紹何謂關注點分離。 關注點分離 「關注點分離」的意思是指「每一個模組各自有獨立的關注點」，即意味著每個模組只需要專注在一個焦點上，不需要被不同的概念分心、亦或者是不需要到分散的檔案中進行修改。以下介紹幾個不同的分離方式： 以技術為單位分離 — Angular Angular 也曾經被我們介紹過（雖然最後斷尾了QQ），Angular 把 html / css / js 不同的技術語言分開並放置在不同的檔案之中，希望開發者一次只關注一種技術。 以視覺主軸分離 — ReactJS ReactJS 則是以「視覺」為主體分離，提出了 JSX 概念，將 html 跟 JS 混合在一起，並組成了元件（Compoment）。然而 JSX 剛開始提出的時候因為技術被混合在一起而被認為不符合關注點分離。但仔細一想，過往的關注點分離僅是讓「技術」被分離，當我們要去修改一個模組的時候，必須到不同的檔案當中去修改，而不是讓真正重要的「畫面」作為關注的分離點。