iT邦幫忙

2022 iThome 鐵人賽

DAY 26
1
Modern Web

【每天5分鐘】學前端系列 第 26

Day26【每天5分鐘】學前端 | 前端三大框架

  • 分享至 

  • xImage
  •  

JavaScript 的內容有很多,【每天 5 分鐘】的介紹,不知道要寫到什麼時候 XD
這幾天很掙扎,在 30 天的鐵人賽中, JS 的部分 要介紹到哪邊為止?
還有很多東西可以分享,好像寫不完。不如就到這裡吧!
此系列文 只是 開頭 ,若有興趣深入研究,再自行 延伸學習 喔 ^O^/

今天要來介紹一下前端主流的三大框架 Vue.jsReactAngular

Vue.js React Angular
https://ithelp.ithome.com.tw/upload/images/20220927/20151346MImEReOEEn.png https://ithelp.ithome.com.tw/upload/images/20220927/20151346hYqE9mWXjy.png https://ithelp.ithome.com.tw/upload/images/20220927/20151346E7m47Wjhwt.png

框架是什麼呢?

當有了前端基本的基礎(HTMLCSSJavaScript )以後,
接著可以學其中一個框架,來處理 龐大 的程式碼。
當然你要全部都學也可以,了解各個框架的邏輯,也是很有幫助的。

一個網站規模很大,功能也越來越多時,
在程式碼的 開發維護 上,將增加一定的 困難度
若是多人共同編輯,也許會出現 錯綜複雜 的情況~~

框架主要是用來解決問題(應該說任何工具都是)。
如果 jQuery 或原生的 JavaScript 就可以解決,也許並不需要使用到框架。
附上 jQuery 介紹 官網連結維基百科連結W3School 連結

可依照 專案大小 ,來決定要不要使用前端框架。
畢竟,框架主要目的是幫助你解決程式碼 複雜 的問題,
不是讓一個可以 簡單呈現 的程式碼, 變得更加複雜

/images/emoticon/emoticon33.gif /images/emoticon/emoticon33.gif


Vue.js

由中國的 尤雨溪 開發,他聲稱自己是提取 Angular 中自己所喜歡的部分,構建出一款相當 輕量 的框架。
漸進式 JavaScript 框架,上網查得到較多中文教學的資料。資料採 雙向 綁定。
使用 Vue.js 框架所寫的網站: bilibili 等。

React

Facebook 開發。雖然俗稱 React 是三大框架之一,
但嚴格來說它不算是框架,而是用來 渲染 UI 組件函式庫
會使用到大量的 JavaScript ,因此學 React 的同時,也可以強化 JavaScript 基礎。資料流為 單向
使用 React 所寫的網站: Instagram 、 Netflix 等。

Angular

是由 Google 內部的 Angular Team 與其他社群所開發的開源專案。
主要語言使用 TypeScript 。資料採 雙向 綁定。
使用 Angular 框架所寫的網站: Google 等。
附上 TypeScript 介紹 官網連結維基百科連結


前端框架 除了上述三種 主流 框架,
還有其他的,若有興趣可再自行研究。

至於要使用哪一個框架,可依照自己的 喜好 或公司 需求 來決定。
需要理解它們各自的 特性 再做使用,
讓框架成為解決問題的墊腳石,而不是絆腳石~

本系列文只是 入門教學 ,程式碼並不多,
不會使用到框架來切網頁喔 ٩(^ᴗ^)۶


https://ithelp.ithome.com.tw/upload/images/20220927/20151346LzgXw88AOT.png 自學指引:

  • MVC 、 MVVM
  • SPA (Single-page application)
  • JS class
  • JS Async / Await
  • DOM 、 BOM


感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day25【每天5分鐘】學前端 | JavaScript 函式 function
下一篇
Day27【每天5分鐘】學前端 | 切版前的 wireframe 線框圖
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
json_liang
iT邦研究生 4 級 ‧ 2022-09-27 22:48:22

明天見!/images/emoticon/emoticon08.gif

Olivia iT邦新手 4 級 ‧ 2022-09-27 23:50:59 檢舉

明天見 /images/emoticon/emoticon37.gif

我要留言

立即登入留言