這個世界唯一不變的可能就是變化，歷史的車輪滾滾向前，它不會因任何人的消極緩慢而停止。時代拋棄你時，連一聲再見都不會說。
從最開始的Javascrpit、到后來的Jquery、（ExtJs、EasyUI、MiniUI）、Bootstrapt、Layui，再到如今的mvvm框架（Vue.js、Angular.js、React.js），整個前端的發(fā)展趨勢一直在改變。
就拿Jquery來說，在Dom操作領(lǐng)域無疑是一代霸主，它擊敗了所有Dom領(lǐng)域的競爭對手，卻輸給了時代，mvvm框架的出現(xiàn)，讓它頓時黯然失色。
這不由得讓我想起大潤發(fā)。大潤發(fā)創(chuàng)始人離職時說：戰(zhàn)勝了所有對手，卻輸給了時代。大潤發(fā)在零售行業(yè)是一個號稱19年不關(guān)一家店的傳奇商場。在商場這個領(lǐng)域里，沒有任何人能打敗它，包括沃爾瑪/家樂福，但是很可惜他敗給了這個時代，被阿里巴巴收購，高層集體走人。
據(jù)說在程序員界有那么一條鄙視鏈：每一個程序員應(yīng)該都聽說過程序員鄙視鏈，做c的看不起做c 的，做c 看不起做java的，做java看不起做.net的，然后這些人都看不起搞PHP或前端的，可以說，前端程序員應(yīng)該處于程序員鄙視鏈的底端。如果你看了以上這些慘絕人寰的鄙視鏈之后，仍然沒有擊倒你想要做程序員的心，那我必須提醒你一件最重要的事：先去交一個女朋友，再來學(xué)寫程序；因為一旦你成為軟件工程師之后，就交不到女朋友了。
早期的前端俗稱美工、切圖仔，每天的工作就是切圖、寫寫html、寫寫css。如今前端變得越來越重，早已不復(fù)當(dāng)年，各種新技術(shù)日新月異、層出不窮，前端要學(xué)的東西太多，其學(xué)習(xí)的難度絲毫不低于后端。
最近這幾年，前端的發(fā)展實在太快。Node.js的出現(xiàn)，更是將前端的發(fā)展提升到了一個新的境界。Node.js開啟了前端模塊化、組件化的進程，新技術(shù)層出不窮，各種mvc、mvvm框架也流行了起來。
網(wǎng)站交互方式
網(wǎng)站交互有兩種常用的方式：
經(jīng)典的多頁面
現(xiàn)代式的單頁面
由多頁面組成的站點，我們稱之為多頁應(yīng)用，由單頁面組成的站點稱之為單頁應(yīng)用。
在過去，許多Web后臺常用UI框架，如ExtJs、EasyUI等等，通過iframe來嵌套頁面，表面上看起來像單頁應(yīng)用，其本質(zhì)其實依舊是多頁應(yīng)用。
多頁Web應(yīng)用（MPA）
每一次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都會給返回一個新的html文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站，也叫做多頁應(yīng)用。
多頁應(yīng)用以服務(wù)端為主導(dǎo)，前后端混合。例如：.php文件、aspx文件、jsp文件。
特點：
用戶體驗一般，每次跳轉(zhuǎn)都會刷新整個頁面
頁面切換慢，等待時間過長
每個頁面都要重新加載渲染，速度慢
首屏?xí)r間快，SEO效果好（蜘蛛會爬鏈接）
前后端糅合在一起，開發(fā)和維護效率低
為什么多頁應(yīng)用的首屏?xí)r間快？
首屏?xí)r間叫做頁面首個屏幕的內(nèi)容展現(xiàn)的時間，當(dāng)我們訪問頁面的時候，服務(wù)器返回一個html，頁面就會展示出來，這個過程只經(jīng)歷了一個HTTP請求，所以頁面展示的速度非?？?。
為什么搜索引擎優(yōu)化效果好（SEO）？
搜索引擎在做網(wǎng)頁排名的時候，要根據(jù)網(wǎng)頁內(nèi)容才能給網(wǎng)頁權(quán)重，來進行網(wǎng)頁的排名。搜索引擎是可以識別html內(nèi)容的，而我們每個頁面所有的內(nèi)容都放在Html中，所以這種多頁應(yīng)用，seo排名效果好。
為什么切換慢？
因為每次跳轉(zhuǎn)都需要發(fā)出一個http請求，如果網(wǎng)絡(luò)比較慢，在頁面之間來回跳轉(zhuǎn)時，就會發(fā)現(xiàn)明顯的卡頓。
單頁Web應(yīng)用（SPA）
單頁Web應(yīng)用（single page web application），簡稱SPA，就是只有一張Web頁面的應(yīng)用，是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。
單頁應(yīng)用程序 (SPA) 是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。
單頁應(yīng)用開發(fā)技術(shù)復(fù)雜，所以誕生了一堆的開發(fā)框架：Angular.js、Vue.js、React.js。
單頁應(yīng)用，前后端分離，各司其職，服務(wù)端只處理數(shù)據(jù)，前端只處理頁面（兩者通過接口來交互）。
單頁應(yīng)用的優(yōu)點
用戶體驗好，就像一個原生的客戶端軟件一樣使用，切換過程中不會頻繁有被“打斷”的感覺。
前后端分離，開發(fā)方式好，開發(fā)效率高，可維護性好。服務(wù)端不關(guān)心頁面，只關(guān)心數(shù)據(jù)；客戶端不關(guān)系數(shù)據(jù)庫及數(shù)據(jù)操作，只關(guān)心通過接口拿到數(shù)據(jù)和服務(wù)端交互，處理頁面。
局部刷新，只需要加載渲染局部視圖即可，不需要整頁刷新。
完全的前端組件化，前端開發(fā)不再以頁面為單位，更多地采用組件化的思想，代碼結(jié)構(gòu)和組織方式更加規(guī)范化，便于修改和調(diào)整。
API 共享，如果你的服務(wù)是多端的（瀏覽器端、Android、iOS、微信等），單頁應(yīng)用的模式便于你在多個端共用 API，可以顯著減少服務(wù)端的工作量。容易變化的 UI 部分都已經(jīng)前置到了多端，只受到業(yè)務(wù)數(shù)據(jù)模型影響的 API，更容易穩(wěn)定下來，便于提供更棒的服務(wù)。
組件共享，在某些對性能體驗要求不高的場景，或者產(chǎn)品處于快速試錯階段，借助于一些技術(shù)（Hybrid、React Native），可以在多端共享組件，便于產(chǎn)品的快速迭代，節(jié)約資源。
單頁應(yīng)用的缺點
首次加載大量資源：要在一個頁面上為用戶提供產(chǎn)品的所有功能，在這個頁面加載的時候，首先要加載大量的靜態(tài)資源，這個加載時間相對比較長；
對搜索引擎不友好：因為界面的數(shù)據(jù)絕大部分都是異步加載過來的，所以很難被搜索引擎搜索到。
開發(fā)難度相對較高：開發(fā)者的JavaScript技能必須過關(guān)，同時需要對組件化、設(shè)計模式有所認(rèn)識，他所面對的不再是一個簡單的頁面，而是類似一個運行在瀏覽器環(huán)境中的桌面軟件。
兼容性：單頁應(yīng)用雖然已經(jīng)很成熟了，但是都無法兼顧低版本瀏覽器
表1.1-單頁應(yīng)用和多頁應(yīng)用對比
比較點
多頁應(yīng)用模式MPA
單頁應(yīng)用模式SPA
應(yīng)用構(gòu)成
由多個完整頁面構(gòu)成
一個外殼頁面和多個頁面片段構(gòu)成
跳轉(zhuǎn)方式
頁面之間的跳轉(zhuǎn)是從一個頁面跳轉(zhuǎn)到另一個頁面
頁面片段之間的跳轉(zhuǎn)是把一個頁面片段刪除或隱藏，加載另一個頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn)，并沒有開殼頁面
跳轉(zhuǎn)后公共資源是否重新加載
是
否
URL模式
http://xxx/page1.htmlhttp://xxx/page1.htmlhttp://xxx/shell.html#page1http://xxx/shell.html#page2用戶體驗
頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設(shè)備上
頁面片段間的切換快，用戶體驗好，包括在移動設(shè)備上
能否實現(xiàn)轉(zhuǎn)場動畫
無法實現(xiàn)
容易實現(xiàn)（手機app動效）
頁面間傳遞數(shù)據(jù)
依賴URL、cookie或者localstorage，實現(xiàn)麻煩
因為在一個頁面內(nèi)，頁面間傳遞數(shù)據(jù)很容易實現(xiàn)
搜索引擎優(yōu)化（SEO）
可以直接做
需要單獨方案做，有點麻煩
特別適用的范圍
需要對搜索引擎友好的網(wǎng)站
需要兼顧低版本瀏覽器的網(wǎng)站
對體驗要求高的應(yīng)用，特別是移動應(yīng)用。
管理系統(tǒng)
開發(fā)難度
低一些，框架選擇容易
高一些，需要專門的框架來降低這種模式的開發(fā)難度
CSS和JS文件加載
每個頁面都需要加載自己的CSS和JS文件
整個項目的CSS和JS文件只需要加載一次
頁面Dom加載
瀏覽器需要不停的創(chuàng)建完整的DOM樹，刪除完整的DOM樹
瀏覽器只需要創(chuàng)建一個完整的DOM樹，此后的偽頁面切換其實只是在換某個div中的內(nèi)容
頁面請求
所有頁面請求都是同步的——客戶端在等待服務(wù)器給相應(yīng)的時候，瀏覽器中一片空白
所有的“偽頁面請求”都是異步請求——客戶端在等待下一個頁面片段到來時，仍可以顯示前一個頁面內(nèi)容——瀏覽器體驗更好
HTML頁面數(shù)
項目中有多個完整的HTML頁面
整個項目中只有一個完整的HTML頁面；其他HTML文件都是HTML片段。
說明：現(xiàn)在除了一些電商網(wǎng)站，其實已經(jīng)很少有系統(tǒng)需要去兼容低版本的瀏覽器，大部分是IE9以上的瀏覽器。而用戶想要擁有更好的上網(wǎng)操作體驗，就不得不選擇高版本的瀏覽器。如果不需要考慮SEO的項目，建議采用單頁應(yīng)用的開發(fā)方式，因為這樣可以前后端完全分離，提高開發(fā)效率，用戶體驗只是其次。
前后端分離的開發(fā)模式
前端端分離的開發(fā)模式基本流程通常如下：
項目立項
需求分析
服務(wù)端的工作
需求分析
數(shù)據(jù)庫設(shè)計
接口設(shè)計（有時候也需要前端參與其中）
接口開發(fā)
前端的工作
需求分析
寫界面和功能
通過接口和服務(wù)端交互
前后端分離的開發(fā)方式，無論是多頁應(yīng)用還是單頁應(yīng)用都可以采用，但是多頁應(yīng)用采用前后端分離模式的情況通常比較少。
前端的主要工作是什么？主要負(fù)責(zé)MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；
前端三大開發(fā)框架
單頁應(yīng)用開發(fā)其實是比較復(fù)雜的，需要一定的技術(shù)支撐。所以一些前端框架應(yīng)運而生。
Vue.js和Angular.js、React.js 一起，并成為前端三大主流框架。
Angular
09年誕生
Google
它的目的就是讓我們開發(fā)單頁應(yīng)用變得更方便了
它主要為前端帶了mvvm開發(fā)模式，這是一個偉大的變革
mvvm：數(shù)據(jù)驅(qū)動視圖，不操作DOM
React
Facebook公司自己開發(fā)的一個Web框架
組件化
Vue
Vue作者：尤雨溪
早期由個人開發(fā)，在國內(nèi)很火
Vue借鑒了Angular和React之所長，屬于后起之秀
前端三大主流框架各有千秋，對于規(guī)模不大的前端項目來說，Vue 因其極易上手會被列出首選之位，而Angular 在快速開發(fā)大型 Web 項目上很受推崇，但仍存諸多缺陷，React則為 JavaScript 應(yīng)用開發(fā)者提供新的開發(fā)方式。
如果硬是要給這三大框架一個排名，目前排名是React、Vue、Angular。從目前國內(nèi)的整體行情看，一些中小企業(yè)，更青睞于Vue。作為一名開發(fā)者，我們無需糾結(jié)哪個更好，對我們而言，不同的框架或者不同的語言，它們都只是一個工具而已，是我們解決問題的工具。
Vue.js 是目前最火的一個前端框架，而React是最流行的一個前端框架（React除了開發(fā)網(wǎng)站，還可以開發(fā)手機App， 當(dāng)然Vue同樣也可以用于進行手機App開發(fā)，需要借助于Weex，而且沒有React那么強大）。
Vue.js最火，表示想要學(xué)習(xí)的人員最多，React最流行，表示目前正在使用的人最多。而Angular 的流行度已呈現(xiàn)明顯下滑趨勢。甚至有人說：“對于 Angular 2，我想我永遠(yuǎn)不會再使用。 因為它帶來的問題遠(yuǎn)遠(yuǎn)多于解決的問題。 它需要豐富的知識經(jīng)驗來構(gòu)建大型應(yīng)用程序，否則總是會遇到性能問題。”
如今最火熱的前端需求在于移動端，而不再是 Web 。React Native 非常成功，同時它也會帶動 React.js 的發(fā)展。Vue.js 只會在 Web 前端中占據(jù)主導(dǎo)地位，而不會統(tǒng)治所有的前端領(lǐng)域。React 則可以在所有的前端領(lǐng)域中盛行。這是為什么？
因為Vue.js 未能提供替代 React Native 的可行性方案（Weex 和 Quasar 太年輕，存在碎片化并且很脆弱），伴隨著 React Native 和 React.js 的爆發(fā)式增長，如果你掌握了 Web 前端的 React 和 Redux ，你將獲得極大優(yōu)勢：只要你想，便可在幾周內(nèi)熟練地將 React Native 應(yīng)用到移動端。
而使用 Vue.js 編寫 Web 的前端人員幾周就能掌握 React Native，所以不管怎么說，學(xué)習(xí)Vue.js都是非常值得的。
為什么要學(xué)習(xí)流行框架（mvvm框架）
企業(yè)為了提高開發(fā)效率：在企業(yè)中，時間就是效率，效率就是金錢。而使用框架，能夠提高開發(fā)的效率。
提高開發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js
在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關(guān)注業(yè)務(wù)邏輯；
增強自己就業(yè)時候的競爭力
mvvm框架能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數(shù)據(jù)綁定的概念：通過框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯，不再關(guān)心DOM是如何渲染的了。
在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，從而解放用戶的雙手，讓程序員可以有更多的時間去關(guān)注業(yè)務(wù)邏輯。
框架和庫的區(qū)別
框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構(gòu)整個項目。
框架舉例：
node 中的express
Java中的spring boot
庫（插件）：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫來實現(xiàn)需求。
例如：
從Jquery 切換到 Zepto
從 EJS 切換到 art-template
