【文章筆記】簡單介紹前端相關名詞

HTML

產生網頁的內容，用成對的標籤 ex.<p><p/> 把內容寫在裡面

CSS

負責網頁的樣式 ex. background-color 可以設定背景顏色

用 CSS 預處理器 ex. SCSS/SASS、Less、Stylus 可以使用變數，重複使用的樣式可以用變數代替，可以使 CSS 寫起來更有效率，也更方便管理

SCSS 語法 -> 預處理器 -> CSS

PostCSS 中的 plugin 可以幫 CSS 加上 prefix(解決跨瀏覽器的問題)

SCSS -> 預處理器 -> CSS -> PostCSS -> 加了 prefix 的 CSS

JavaScript (又稱作 vanilla js)

處理網頁的功能

在自己電腦上可以跑的網頁，其他地方不一定能跑，要考慮跨瀏覽器的問題，JavaScript 針對不同瀏覽器，寫法也會有不同

jQuery

是一個 JavaScript 的 Library，一種寫法就可以適用所有瀏覽器，不需要針對不同的瀏覽器去做調整

browserify

是一個 JavaScript 的 Library，可以讓 JavaScript 用引入的方法把不同 Library 引入，解決不同 Library 可能互相干擾的問題

gulp

是一個 task manager，上面一個個的轉換來轉換去的操作，可以透過 gulp 集中起來，利用 gulp 去統一執行那些轉換的操作

babel

可以把新的 JavaScript 的語法(ES6) 轉換成舊的

webpack

可以透過 plugin(一種工具做的事情變成一個 plugin)，把上面的事情集中在一起做了

React

只改變 state，UI 就會跟著變，只重畫必要部分，解決全部重畫會產生的效能問題

MVC

是一種設計模式，一種架構，將程式碼用以下概念區分開來

• Model：裡面放跟資料有關的東西
• View：裡面放跟顯示畫面有關的東西
• Controller：連接 View 跟 Model 有關的操作

使用 MVC 可以讓 code 更好看也更好維護

Ajax (Asynchronous JavaScript and XML)

以非同步去呼叫 Server API，在不換頁的狀況下跟 server 溝通
利用 Ajax 跟後端同步資料，再用 Javascript 處理畫面，畫面是由 Javascript 動態產生，所以使用者看到的都是同一個頁面

SPA (Single Page Application)

單頁式應用
相對於 MPA (Mutiple Page Application)

可能的缺點：

• 第一次發點按時，資料還沒傳回來，使用者就點選了別的項目，結果使用者看到的是第一次點選的項目
• 由於畫面是 JS 動態產生的，SEO 會很差

SSR (Server Side Rendering)

第一個頁面由 Server side render，之後的頁面才由 Client side render

PWA (Progressive Web App)

使用起來像 app 的 web

參考文章：
零基礎的小明要如何成為前端工程師？
跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR