# 【Day29】前端框架與JavaScript
###### tags: `JavaScript` `14th鐵人賽`
打開求職網站，搜尋前端職缺時，除了前端三大元素：HTML、CSS、JavaScript外，也經常看到框架：Angular、React、Vue，那我們知道HTML為標籤語言、CSS為樣式表、JavaScript為程式語言，那框架又是什麼呢？

本篇介紹：

- 框架為何
- Vue.js、React.js、Angular.js
- React.js的特色、優勢

---

## 先來談談框架(Software Framework)

[MDN前端框架簡介](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)中提到：框架是個針對軟體構建，提供完整解決方案的函式庫

可以把框架想像成一個房子的鋼筋水泥，如果沒有框架就像是大樓都用一點一點用土堆起來(也不是不行啦…)，但相較起來框架提供完整的函式庫、類別庫，讓開發者更快得到骨架，提升開發效率、降低維護難度。

而程式語言也有對應的框架可使用，以CSS、JavaScript為例：

- CSS – bootstrap
- JavaScript –Vue.js、React.js、Angular.js

## 怎麼選擇框架？

上面有提到JavaScript有三大框架可讓程式運作，這些框架分別有不同的優缺點，提供一些特色給大家參考：

| 框架 | 特點 |
| --- | --- |
| React | 輕量，虛擬DOM的概念，運行速度快 打造UI介面彈性高 |
| Vue | 輕量級的框架，性能高 較容易上手 |
| Angular | 模板功能、指令豐富強大 個組件分門別類，代碼清晰 相較於React、Vue更加完整 |

補充：jQuery以Javascript來編寫的函式庫，寫得少，做得多。但隨著專案規模逐漸增大，程式複雜度提升，直接操作 DOM 的缺點也發現許多問題點。

## ****學習至少一個框架****

為了讓網站穩定維護並提升效能外，也提供模組化的UI，而各大框架在GitHub中也能找到多樣的套件，讓開發更有效率，或是汲取更多新知。

---
參考
[MDN前端框架簡介](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
[前端框架第 0 課：學習框架前該知道的事](https://parkerhiphop027.medium.com/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E7%AC%AC0%E8%AA%B2-%E5%AD%B8%E7%BF%92%E6%A1%86%E6%9E%B6%E5%89%8D%E8%A9%B2%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B-8e5852b0bb55)