Web前端技術的發展

早期的Web應用主要是靜態頁面的瀏覽（如新聞的瀏覽），這些靜態頁面使用HTML語言來編寫（這是HTML5的前身）.1995年設計出JavaScript指令碼語言，從而讓前端網頁具有了動態的效果（跑馬燈、浮動廣告等），以及與使用者互動的能力（表單）。

然而隨著網路的發展，很多線下業務開始向線上發展，基於Internet的Web應用也變得越來越複雜，使用者訪問的資源不僅僅侷限與伺服器硬碟存放的靜態網頁，更多的應用需要更具使用者的請求動態生成頁面資訊，複雜一些的需要從資料庫中查詢資料，經過計算，生成一個頁面返回給客戶。1996年微軟退出ASP技術，1997年Sun公司推出了JSP技術，1998年PHP正式釋出，由此網頁開啟真正動態互動的階段。這些伺服器端的動態頁面技術使得網頁可以獲取伺服器的資料資訊並保持更新，推動了搜尋引擎和各種論壇的出現，全球資訊網開始快速發展。伺服器端網頁動態互動功能的不斷豐富，伴隨的是後端邏輯複雜度的快速上升，程式碼越來越複雜。為了更好的管理後端邏輯，出現了大量後端的MVC框架。

動態頁面實現了動態互動和資料即時存取，但由於動態頁面時有後端技術驅動的，每次資料互動都需要重新整理一次瀏覽器，頻繁的頁面重新整理非常影響使用者的體驗，這個問題知道Google再2004年使用Ajax技術開發的Gmail和谷歌地圖的釋出，才得到解決。

Ajax改變了傳統的使用者請求-等待-響應這種Web互動模式，採用非同步互動機制避免了使用者對伺服器響應的等待，提供了更好的使用者體驗。此外也改變了使用者請求-伺服器-頁面重新整理的使用者體驗方式，提供了頁面區域性重新整理的實現機制。Ajax開啟了Web2.0的時代。

由於Ajax的火熱，帶動了古老的技術CSS和JavaScript著兩個被程式設計師瞧不起的技術。

Ajax的全程時Asynchronous JavaScript and XML，即非同步JavaScript和XML。

Ajax並不是一種技術，它是多種技術的組合，包括

• 使用XHTML和CSS來呈現資料
• 使用DOM實現動態顯示和互動
• 使用XML和XSLT實現資料互動和操作
• 使用XMLHttpRequest實現非同步資料的傳送與接收
• 使用JavaScript將XHTML、DOM、XML和XmLHttpRequest繫結

之後的一段時間，前端技術的發展主要幾種如果簡化頁面的開發，如何實現富頁面，相繼湧現出很多前端框架和庫，如jQuery、Dojo、ExtJS、ECharts等。直到HTML5的出現，打破這種格局，各大瀏覽器紛紛支援HTML5，前端能夠實現的互動功能越來越多，相應的程式碼複雜度也快速提高，以至於用於後端的MV*框架開始出現再前端部分。

2010年10月出現Backbone開始，Knockout、Angular、Ember、React、Vue相繼出現，這些框架的應用，使得網站從WebSite進化成Web App，開啟了網站應用的SPA（Single Page Application）時代

SPA即單頁應用程式，是指只有一個Web頁面的應用。單頁應用是載入單個HTML頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。瀏覽器一開始必須的HTML、CSS和JavaScript，所有的操作都在這個頁面上完成，有JavaScript來控制互動和頁面的區域性重新整理。

優點：

• 前後端分離-前端工作在瀏覽器端，後端工作在伺服器端，使得前後端徹底分離開發，並行工作，對開發人員的技能要求也會變得更加單一。
• 良好的使用者體驗-不需要重新重新整理頁面
• 減輕伺服器壓力-伺服器只需要提供資料
• 公用一套後端程式程式碼-不用修改後端程式程式碼就可以同時用於Web介面、手機、平板等多種客戶端  （導致微服務架構的興起）

缺點：

• 初次載入耗時較多---為實現單頁Web應用功能及顯示效果，需要在載入頁面的時候JavaScript和CSS統一載入（部分也買你可以在需要的時候非同步載入），因此第一次載入的時候會稍微慢一點。為了減少 載入時的資料流量，提高載入時間，必須對JavaScript及CSS程式碼進行合併壓縮處理
• 前進、後退的問題---由於單頁Web應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進、後退功能。如果要實現瀏覽器的前進後退功能，需要編寫額外的程式碼手動實現
• SEO難度較高---由於所有的內容都在一個頁面中動態替換顯示，所以SEO上有著天然的弱勢，如果你的站點對SEO很看重，且要用單頁應用，那麼可以編寫一些靜態頁面給搜尋引擎，或者通過伺服器渲染技術來解決

2015年ES6釋出，由於ES6語法支援的滯後，出現了Babel編譯器，他可以將ES6編譯成ES5

後續會介紹ES6

當前的前端技術已經形成了一個大的技術體系：

• 以Github為代表的程式碼管理倉庫
• 以NPM和Yarn為代表的包管理工具
• ECMAScript6、TypeScript及Babel構成的指令碼體系
• HTML5、CSS3和相應的處理技術
• 以React、vue、Angular為代表的前端框架
• 以Webpack為代表的打包工具
• 以Node.js為基礎的Express和Koa後端框架

介紹MC*

MVC

MVC是Web開發中應用非常廣泛的一種架構模式，之後又演變出MVP模式和MVVM模式。

在MVC架構中，一個應用被分為三個部分，即模型（Model）、檢視（View）和控制器{Controller}。

MVP

MVP（Model-View-Presenter）是由經典的MVC模式演變而來，它們的基本思想有相同的地方：Presenter負責邏輯的處理，Model提供資料，View負責顯示。

MVC和MVP最大的區別就是MVP中View並不直接使用Model，他們之間的通訊時通過Presenter來進行的，所有的互動都發生在Presenter內部，而在MVC中View會直接從Model中讀取資料而不是通過Controller。

MVVM

MVVM（Model-View-ViewModel）是一種軟體架構模式，由微軟WPF和Silverlight的架構師Ken Cooper和Teb Peters開發，是一種簡化使用者介面的時間驅動程式設計方式。

MVVM模式的核心資料驅動，即ViewModel，ViewModel是View和Model的關係對映。ViewModel是一個值轉換器（Value Converter），負責轉換Model中資料物件，使得資料變得更加易於管理和使用。在MVVM中View和Model是不可以直接進行通訊的，他們之間存在著ViewModel這個中介充當觀察者的角色。

MVVM模式最核心的特性就是資料雙向繫結，當使用者操作View，ViewModel感知變化，然後通知Model發生相應改變；反之Model發生了改變，ViewModel感知到變化通知View進行更新。ViewModel向上與檢視層View進行雙向資料繫結，向下與Model通過介面請求進行資料互動，起到承上啟下的作用。

MVVM的核心理念是通過宣告式的資料繫結來實現View的分離，完全解耦View。