這個(gè)世界唯一不變的可能就是變化，歷史的車(chē)輪滾滾向前，它不會(huì)因任何人的消極緩慢而停止。時(shí)代拋棄你時(shí)，連一聲再見(jiàn)都不會(huì)說(shuō)。

　　從最開(kāi)始的Javascrpit、到后來(lái)的Jquery、（ExtJs、EasyUI、MiniUI）、Bootstrapt、Layui，再到如今的mvvm框架（Vue.js、Angular.js、React.js），整個(gè)前端的發(fā)展趨勢(shì)一直在改變。

　　就拿Jquery來(lái)說(shuō)，在Dom操作領(lǐng)域無(wú)疑是一代霸主，它擊敗了所有Dom領(lǐng)域的競(jìng)爭(zhēng)對(duì)手，卻輸給了時(shí)代，mvvm框架的出現(xiàn)，讓它頓時(shí)黯然失色。

　　這不由得讓我想起大潤(rùn)發(fā)。大潤(rùn)發(fā)創(chuàng)始人離職時(shí)說(shuō)：戰(zhàn)勝了所有對(duì)手，卻輸給了時(shí)代。大潤(rùn)發(fā)在零售行業(yè)是一個(gè)號(hào)稱(chēng)19年不關(guān)一家店的傳奇商場(chǎng)。在商場(chǎng)這個(gè)領(lǐng)域里，沒(méi)有任何人能打敗它，包括沃爾瑪/家樂(lè)福，但是很可惜他敗給了這個(gè)時(shí)代，被阿里巴巴收購(gòu)，高層集體走人。

　　據(jù)說(shuō)在程序員界有那么一條鄙視鏈：每一個(gè)程序員應(yīng)該都聽(tīng)說(shuō)過(guò)程序員鄙視鏈，做c的看不起做c 的，做c 看不起做java的，做java看不起做.net的，然后這些人都看不起搞PHP或前端的，可以說(shuō)，前端程序員應(yīng)該處于程序員鄙視鏈的底端。如果你看了以上這些慘絕人寰的鄙視鏈之后，仍然沒(méi)有擊倒你想要做程序員的心，那我必須提醒你一件最重要的事：先去交一個(gè)女朋友，再來(lái)學(xué)寫(xiě)程序；因?yàn)橐坏┠愠蔀檐浖こ處熤?，就交不到女朋友了?/p>

      早期的前端俗稱(chēng)美工、切圖仔，每天的工作就是切圖、寫(xiě)寫(xiě)html、寫(xiě)寫(xiě)css。如今前端變得越來(lái)越重，早已不復(fù)當(dāng)年，各種新技術(shù)日新月異、層出不窮，前端要學(xué)的東西太多，其學(xué)習(xí)的難度絲毫不低于后端。

　　最近這幾年，前端的發(fā)展實(shí)在太快。Node.js的出現(xiàn)，更是將前端的發(fā)展提升到了一個(gè)新的境界。Node.js開(kāi)啟了前端模塊化、組件化的進(jìn)程，新技術(shù)層出不窮，各種mvc、mvvm框架也流行了起來(lái)。

網(wǎng)站交互方式

    網(wǎng)站交互有兩種常用的方式：

• 經(jīng)典的多頁(yè)面

• 現(xiàn)代式的單頁(yè)面

　　由多頁(yè)面組成的站點(diǎn)，我們稱(chēng)之為多頁(yè)應(yīng)用，由單頁(yè)面組成的站點(diǎn)稱(chēng)之為單頁(yè)應(yīng)用。

　　在過(guò)去，許多Web后臺(tái)常用UI框架，如ExtJs、EasyUI等等，通過(guò)iframe來(lái)嵌套頁(yè)面，表面上看起來(lái)像單頁(yè)應(yīng)用，其本質(zhì)其實(shí)依舊是多頁(yè)應(yīng)用。

多頁(yè)Web應(yīng)用（MPA）

　　每一次頁(yè)面跳轉(zhuǎn)的時(shí)候，后臺(tái)服務(wù)器都會(huì)給返回一個(gè)新的html文檔，這種類(lèi)型的網(wǎng)站也就是多頁(yè)網(wǎng)站，也叫做多頁(yè)應(yīng)用。

　　多頁(yè)應(yīng)用以服務(wù)端為主導(dǎo)，前后端混合。例如：.php文件、aspx文件、jsp文件。

　　特點(diǎn)：

• 用戶(hù)體驗(yàn)一般，每次跳轉(zhuǎn)都會(huì)刷新整個(gè)頁(yè)面

• 頁(yè)面切換慢，等待時(shí)間過(guò)長(zhǎng)

• 每個(gè)頁(yè)面都要重新加載渲染，速度慢

• 首屏?xí)r間快，SEO效果好（蜘蛛會(huì)爬鏈接）

• 前后端糅合在一起，開(kāi)發(fā)和維護(hù)效率低

為什么多頁(yè)應(yīng)用的首屏?xí)r間快？

　　首屏?xí)r間叫做頁(yè)面首個(gè)屏幕的內(nèi)容展現(xiàn)的時(shí)間，當(dāng)我們?cè)L問(wèn)頁(yè)面的時(shí)候，服務(wù)器返回一個(gè)html，頁(yè)面就會(huì)展示出來(lái)，這個(gè)過(guò)程只經(jīng)歷了一個(gè)HTTP請(qǐng)求，所以頁(yè)面展示的速度非常快。

為什么搜索引擎優(yōu)化效果好（SEO）？

　　搜索引擎在做網(wǎng)頁(yè)排名的時(shí)候，要根據(jù)網(wǎng)頁(yè)內(nèi)容才能給網(wǎng)頁(yè)權(quán)重，來(lái)進(jìn)行網(wǎng)頁(yè)的排名。搜索引擎是可以識(shí)別html內(nèi)容的，而我們每個(gè)頁(yè)面所有的內(nèi)容都放在Html中，所以這種多頁(yè)應(yīng)用，seo排名效果好。

為什么切換慢？

　　因?yàn)槊看翁D(zhuǎn)都需要發(fā)出一個(gè)http請(qǐng)求，如果網(wǎng)絡(luò)比較慢，在頁(yè)面之間來(lái)回跳轉(zhuǎn)時(shí)，就會(huì)發(fā)現(xiàn)明顯的卡頓。

單頁(yè)Web應(yīng)用（SPA）

　　單頁(yè)Web應(yīng)用（single page web application），簡(jiǎn)稱(chēng)SPA，就是只有一張Web頁(yè)面的應(yīng)用，是加載單個(gè)HTML 頁(yè)面并在用戶(hù)與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。

　　單頁(yè)應(yīng)用程序 (SPA) 是加載單個(gè)HTML 頁(yè)面并在用戶(hù)與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。瀏覽器一開(kāi)始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁(yè)面上完成，都由JavaScript來(lái)控制。

　　單頁(yè)應(yīng)用開(kāi)發(fā)技術(shù)復(fù)雜，所以誕生了一堆的開(kāi)發(fā)框架：Angular.js、Vue.js、React.js。

      單頁(yè)應(yīng)用，前后端分離，各司其職，服務(wù)端只處理數(shù)據(jù)，前端只處理頁(yè)面（兩者通過(guò)接口來(lái)交互）。

單頁(yè)應(yīng)用的優(yōu)點(diǎn)

• 用戶(hù)體驗(yàn)好，就像一個(gè)原生的客戶(hù)端軟件一樣使用，切換過(guò)程中不會(huì)頻繁有被“打斷”的感覺(jué)。

• 前后端分離，開(kāi)發(fā)方式好，開(kāi)發(fā)效率高，可維護(hù)性好。服務(wù)端不關(guān)心頁(yè)面，只關(guān)心數(shù)據(jù)；客戶(hù)端不關(guān)系數(shù)據(jù)庫(kù)及數(shù)據(jù)操作，只關(guān)心通過(guò)接口拿到數(shù)據(jù)和服務(wù)端交互，處理頁(yè)面。

• 局部刷新，只需要加載渲染局部視圖即可，不需要整頁(yè)刷新。

• 完全的前端組件化，前端開(kāi)發(fā)不再以頁(yè)面為單位，更多地采用組件化的思想，代碼結(jié)構(gòu)和組織方式更加規(guī)范化，便于修改和調(diào)整。

• API 共享，如果你的服務(wù)是多端的（瀏覽器端、Android、iOS、微信等），單頁(yè)應(yīng)用的模式便于你在多個(gè)端共用 API，可以顯著減少服務(wù)端的工作量。容易變化的 UI 部分都已經(jīng)前置到了多端，只受到業(yè)務(wù)數(shù)據(jù)模型影響的 API，更容易穩(wěn)定下來(lái)，便于提供更棒的服務(wù)。

• 組件共享，在某些對(duì)性能體驗(yàn)要求不高的場(chǎng)景，或者產(chǎn)品處于快速試錯(cuò)階段，借助于一些技術(shù)（Hybrid、React Native），可以在多端共享組件，便于產(chǎn)品的快速迭代，節(jié)約資源。

   單頁(yè)應(yīng)用的缺點(diǎn)

• 首次加載大量資源：要在一個(gè)頁(yè)面上為用戶(hù)提供產(chǎn)品的所有功能，在這個(gè)頁(yè)面加載的時(shí)候，首先要加載大量的靜態(tài)資源，這個(gè)加載時(shí)間相對(duì)比較長(zhǎng)；

• 對(duì)搜索引擎不友好：因?yàn)榻缑娴臄?shù)據(jù)絕大部分都是異步加載過(guò)來(lái)的，所以很難被搜索引擎搜索到。

• 開(kāi)發(fā)難度相對(duì)較高：開(kāi)發(fā)者的JavaScript技能必須過(guò)關(guān)，同時(shí)需要對(duì)組件化、設(shè)計(jì)模式有所認(rèn)識(shí)，他所面對(duì)的不再是一個(gè)簡(jiǎn)單的頁(yè)面，而是類(lèi)似一個(gè)運(yùn)行在瀏覽器環(huán)境中的桌面軟件。

• 兼容性：單頁(yè)應(yīng)用雖然已經(jīng)很成熟了，但是都無(wú)法兼顧低版本瀏覽器

表1.1-單頁(yè)應(yīng)用和多頁(yè)應(yīng)用對(duì)比

　　說(shuō)明：現(xiàn)在除了一些電商網(wǎng)站，其實(shí)已經(jīng)很少有系統(tǒng)需要去兼容低版本的瀏覽器，大部分是IE9以上的瀏覽器。而用戶(hù)想要擁有更好的上網(wǎng)操作體驗(yàn)，就不得不選擇高版本的瀏覽器。如果不需要考慮SEO的項(xiàng)目，建議采用單頁(yè)應(yīng)用的開(kāi)發(fā)方式，因?yàn)檫@樣可以前后端完全分離，提高開(kāi)發(fā)效率，用戶(hù)體驗(yàn)只是其次。

前后端分離的開(kāi)發(fā)模式

    前端端分離的開(kāi)發(fā)模式基本流程通常如下：

1. 項(xiàng)目立項(xiàng)

2. 需求分析

3. 服務(wù)端的工作

• 需求分析

• 數(shù)據(jù)庫(kù)設(shè)計(jì)

• 接口設(shè)計(jì)（有時(shí)候也需要前端參與其中）

• 接口開(kāi)發(fā)

1. 前端的工作

• 需求分析

• 寫(xiě)界面和功能

• 通過(guò)接口和服務(wù)端交互

前后端分離的開(kāi)發(fā)方式，無(wú)論是多頁(yè)應(yīng)用還是單頁(yè)應(yīng)用都可以采用，但是多頁(yè)應(yīng)用采用前后端分離模式的情況通常比較少。

前端的主要工作是什么？主要負(fù)責(zé)MVC中的V這一層；主要工作就是和界面打交道，來(lái)制作前端頁(yè)面效果；

前端三大開(kāi)發(fā)框架

單頁(yè)應(yīng)用開(kāi)發(fā)其實(shí)是比較復(fù)雜的，需要一定的技術(shù)支撐。所以一些前端框架應(yīng)運(yùn)而生。

Vue.js和Angular.js、React.js 一起，并成為前端三大主流框架。

Angular

• 09年誕生

• Google

• 它的目的就是讓我們開(kāi)發(fā)單頁(yè)應(yīng)用變得更方便了

• 它主要為前端帶了mvvm開(kāi)發(fā)模式，這是一個(gè)偉大的變革

• mvvm：數(shù)據(jù)驅(qū)動(dòng)視圖，不操作DOM

React

• Facebook公司自己開(kāi)發(fā)的一個(gè)Web框架

• 組件化

Vue

• Vue作者：尤雨溪

• 早期由個(gè)人開(kāi)發(fā)，在國(guó)內(nèi)很火

• Vue借鑒了Angular和React之所長(zhǎng)，屬于后起之秀

　　前端三大主流框架各有千秋，對(duì)于規(guī)模不大的前端項(xiàng)目來(lái)說(shuō)，Vue 因其極易上手會(huì)被列出首選之位，而Angular 在快速開(kāi)發(fā)大型 Web 項(xiàng)目上很受推崇，但仍存諸多缺陷，React則為 JavaScript 應(yīng)用開(kāi)發(fā)者提供新的開(kāi)發(fā)方式。

　　如果硬是要給這三大框架一個(gè)排名，目前排名是React、Vue、Angular。從目前國(guó)內(nèi)的整體行情看，一些中小企業(yè)，更青睞于Vue。作為一名開(kāi)發(fā)者，我們無(wú)需糾結(jié)哪個(gè)更好，對(duì)我們而言，不同的框架或者不同的語(yǔ)言，它們都只是一個(gè)工具而已，是我們解決問(wèn)題的工具。

　　Vue.js 是目前最火的一個(gè)前端框架，而React是最流行的一個(gè)前端框架（React除了開(kāi)發(fā)網(wǎng)站，還可以開(kāi)發(fā)手機(jī)App， 當(dāng)然Vue同樣也可以用于進(jìn)行手機(jī)App開(kāi)發(fā)，需要借助于Weex，而且沒(méi)有React那么強(qiáng)大）。

　　Vue.js最火，表示想要學(xué)習(xí)的人員最多，React最流行，表示目前正在使用的人最多。而Angular 的流行度已呈現(xiàn)明顯下滑趨勢(shì)。甚至有人說(shuō)：“對(duì)于 Angular 2，我想我永遠(yuǎn)不會(huì)再使用。 因?yàn)樗鼛?lái)的問(wèn)題遠(yuǎn)遠(yuǎn)多于解決的問(wèn)題。 它需要豐富的知識(shí)經(jīng)驗(yàn)來(lái)構(gòu)建大型應(yīng)用程序，否則總是會(huì)遇到性能問(wèn)題。”

　　如今最火熱的前端需求在于移動(dòng)端，而不再是 Web 。React Native 非常成功，同時(shí)它也會(huì)帶動(dòng) React.js 的發(fā)展。Vue.js 只會(huì)在 Web 前端中占據(jù)主導(dǎo)地位，而不會(huì)統(tǒng)治所有的前端領(lǐng)域。React 則可以在所有的前端領(lǐng)域中盛行。這是為什么？

因?yàn)閂ue.js 未能提供替代 React Native 的可行性方案（Weex 和 Quasar 太年輕，存在碎片化并且很脆弱），伴隨著 React Native 和 React.js 的爆發(fā)式增長(zhǎng)，如果你掌握了 Web 前端的 React 和 Redux ，你將獲得極大優(yōu)勢(shì)：只要你想，便可在幾周內(nèi)熟練地將 React Native 應(yīng)用到移動(dòng)端。

而使用 Vue.js 編寫(xiě) Web 的前端人員幾周就能掌握 React Native，所以不管怎么說(shuō)，學(xué)習(xí)Vue.js都是非常值得的。

為什么要學(xué)習(xí)流行框架（mvvm框架）

• 企業(yè)為了提高開(kāi)發(fā)效率：在企業(yè)中，時(shí)間就是效率，效率就是金錢(qián)。而使用框架，能夠提高開(kāi)發(fā)的效率。

• 提高開(kāi)發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類(lèi)的類(lèi)庫(kù) -> 前端模板引擎 -> Angular.js / Vue.js

• 在Vue中，一個(gè)核心的概念，就是讓用戶(hù)不再操作DOM元素，解放了用戶(hù)的雙手，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯；

• 增強(qiáng)自己就業(yè)時(shí)候的競(jìng)爭(zhēng)力

　　mvvm框架能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數(shù)據(jù)綁定的概念：通過(guò)框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯，不再關(guān)心DOM是如何渲染的了。

　　在Vue中，一個(gè)核心的概念，就是讓用戶(hù)不再操作DOM元素，從而解放用戶(hù)的雙手，讓程序員可以有更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯。

框架和庫(kù)的區(qū)別

框架：是一套完整的解決方案；對(duì)項(xiàng)目的侵入性較大，項(xiàng)目如果需要更換框架，則需要重新架構(gòu)整個(gè)項(xiàng)目。

框架舉例：

• node 中的express

• Java中的spring boot

庫(kù)（插件）：提供某一個(gè)小功能，對(duì)項(xiàng)目的侵入性較小，如果某個(gè)庫(kù)無(wú)法完成某些需求，可以很容易切換到其它庫(kù)來(lái)實(shí)現(xiàn)需求。

例如：

• 從Jquery 切換到 Zepto

• 從 EJS 切換到 art-template