---
# System prepended metadata

title: 心得-關於架構學習

---

# 心得- 關於軟體專案架構學習

###### tags: `學習心得` `軟體`


相對於之前單一架構組合成靜態網頁，現在更多的是框架的包裝，一開始接觸時，太多的抽象的概念，過於細緻的分工，有點難以招架。但經過多個專案的接觸，慢慢的抓到一些小訣竅。


---

### 1. **先觀察整個專案的資料夾結構**
 可以觀察出整個專案的風格架構，對於初學者而言則是快速了解框架運作流程的小tips,至少知道要把資料放在哪一層XD。
 

 ![](https://hackmd.io/_uploads/Byb6R8rZT.png)

以此圖(Angular)專案舉例，可以看到最大層組成為 
(大層可以拿來學習初次碰這個框架要注意的眉角)
* node_modules (npm 套件區)
* src (主要開發區)
* dist(build 的產物)
* 和一些其他附加檔案 (比較重要的是 angular.json, package.json/package-lock.json 要知道裝那些套件XD) 

知道開發層(src)便可以開始著手學習專案風格
* Component (放各個組件)
* Models(接資料的模型)
* Pipes(轉換資料呈現方式的小功能)
* 和一些主要的app 在最外層設定

這樣知道開發層，再參考angular 路由 以及 組件的知識和service 應用上的學習就會相對比較快速。



---

### **2. 認識框架使用的主要特色(一邊搭配現有的專案去學習，才不會導致知識點學起來太過抽象)**

(大知識點)
![](https://hackmd.io/_uploads/HJE2lwrZa.png)

以angular 為例就是圖片上的知識點，由大入門，在抓取更精細的知識點。


(精細的知識點)
* rxjs
* subscribe(訂閱)
* 等等...


---


### **3. 行有餘力，寫最基礎的靜態網站**
 幫助我了解框架運作流程更深，是靜態網站的撰寫，看到歷史的痛點自然而然就知道為何框架會這樣設計。學起來更有敬佩心XD

