瞭解前端中的SPA

李文楊發表於2017-09-18

單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用,是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。

單頁Web應用

單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用。單頁應用程式 (SPA) 是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。[1]  瀏覽器一開始會載入必需的HTML、CSS和JavaScript,所有的操作都在這張頁面上完成,都由JavaScript來控制。因此,對單頁應用來說模組化的開發和設計顯得相當重要。

特點

速度:更好的使用者體驗,讓使用者在web app感受native app的速度和流暢,
·MVC:經典MVC開發模式,前後端各負其責。
·ajax:重前端,業務邏輯全部在本地操作,資料都需要通過AJAX同步、提交。
·路由:在URL中採用#號來作為當前檢視的地址,改變#號後的引數,頁面並不會過載。
單頁Web應用(single page web application,SPA)是當今網站開發技術的弄潮兒,很多傳統網站都在或者已經轉型為單頁Web應用,新的單頁Web應用網站(包括移動平臺上的)也如雨後春筍般湧現在人們的面前,如Gmail、Evernote、Trello等。如果你是一名Web開發人員,卻還沒開發過或者甚至是沒有聽說過單頁應用,那你已經Out很久了。
單頁Web應用和前端工程師們息息相關,因為主要的變革發生在瀏覽器端,用到的技術其實還是HTML+CSS+JavaScript,所有的瀏覽器都原生支援,當然有的瀏覽器因為具備一些高階特性,從而使得單頁Web應用的使用者體驗更上一層樓。關於單頁應用的優點和缺點,網上講解的文章有很多,這裡就不展開論述了。 單頁Web應用,顧名思義,就是隻有一張Web頁面的應用。瀏覽器一開始會載入必需的HTML、CSS和JavaScript,之後所有的操作都在這張頁面上完成,這一切都由JavaScript來控制。因此,單頁Web應用會包含大量的JavaScript程式碼,複雜度可想而知,模組化開發和設計的重要性不言而喻。

單頁web應用開發流程

  • 用迴圈的視角審視Web應用開發
  • 框定一個一致的SPA圖形使用者介面(GUI)和模型
  • 將SPA的原則帶回伺服器端
  • 聚集於對合適的應用進行早期SPA開發 
SPA協調的起點是認識到SPA與指令碼和網頁程式設計有關,而不是與後端應用有關。SPA的主要目標是圍繞著Web 2.0頁面時間互動原則重構Web應用,以便體驗可容易地轉化到多個裝置中,並對使用者有效。這意味著首先要抱著支援這樣一個邏輯活動為目標來設計使用者互動,該活動應該涉及單頁面與一套指令碼,實現一次載入並執行直到活動完成。
一旦使用者互動設計完成,下一步就是框定一個本地狀態或事件模型,該模型應能描述頁面處理與使用者的互動及與任何後端應用互動。儘管這並非不可能,但是開發與伺服器端功能多元件互動的SPA會更加困難。
這會產生一種要對應用伺服器進行重構的誘因,其目的是為了以1:1的比例來支援SPA。就最大程度上而言,該模型應該讓自己的變數及名稱空間本地化,並通過應用的伺服器端與其他SPA互動。這是為了減少對於用本地SPA控制器或模型來在多個SPA之間保留狀態的需求。

相關文章