iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 2

[DAY02]3分鐘帶你初步認識SPA

近年來SPA在前端已是非常火紅的名詞,英文全名是Single Page Application,中文叫做單頁應用程式,即使你不了解它,應該也聽過一些。

與SPA相遇之前

記得在以前進行網頁開發時,總是習慣建立一個HTML檔,裡面寫了滿滿的CSS和HTML程式碼,看著長長一串code就覺得很有成就感(?)。但隨著頁面越來越多,發現維護也開始變麻煩了,今天改這邊,明天又改那邊,這麼長一串也不好找到要改的地方,結果反而花最多時間的是維護。後來接觸了PHP,開始把共同用到的程式碼做輸出搭配引入來使用,雖然管理有比較好些,但終究還是得透過伺服端來運行。就這樣一直想著前端有沒有更好的開發方式,直到聽見了一個名詞:MVC。

什麼是MVC? SPA又是什麼?

翻閱維基百科,MVC模式(Model–view–controller)是軟體工程中的一種軟體架構模式,把軟體系統分為三個基本部分:模型(Model,負責處理並給予資料)、視圖(View,使用者可見的設計畫面)和控制器(Controller,接收請求並處理),是屬於分離開發的模式,除了能夠提昇維護易用性,也適合多工開發。SPA顧名思義叫做單頁應用程式,主要是在載入主頁面時,預先載好所有前端畫面的程式,利用前端的特性,可以讓網址路徑切換並做出換頁的效果,不必向伺服器重新發送Request。關於更多的介紹,在此推薦huli的文章前後端分離與 SPA。我們後面也會用實例來做示範,故這邊先不多做贅述。

與傳統網站開發差別在哪?

這就要說到server side render和client side render是怎麼運作的。在前端技術尚未發達時,一個有規模的網站,通常會有許多網頁檔案,當我們要造訪一個頁面,會經由一串網址向伺服器請求對應的檔案(Controller),由後端抓取資料(Model),並同時結合在視圖(View),處理後再將結果傳回前端,然後變成你所看到的畫面,這是server side render;而SPA在造訪頁面也會使網址產生變化,差別在用前端處理Controller,經由路由(router)找到對應的畫面(View),不需經由後端,資料模型(Model)則可以使用非同步方式向伺服器進行請求,取得資料後,再渲染到畫面,這就是client side render。而SPA正是屬於後者,透過前端使網址產生變化,並且不用重新整理頁面,達到換頁的效果,是不是很帥呢?

結尾

因應現今多元的開發模式,網頁也能夠像是一個封裝程式,搭配HTML5 API與同步/非同步的操作,可以幫助絕大多數用戶帶來更好的使用體驗。相信聽了上述的介紹,應該能理解一些,若還是不太了解沒關係,本系列文章目標會從基礎開始,由淺入深,讓各位瞭解實際運作是如何一回事。


上一篇
[DAY01]前言-踏上SPA學習之旅
下一篇
[DAY03]淺談前端SPA框架-以React為例(上篇)
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言