網站交互、開發方式和前端框架介紹

　　這個世界惟一不變的可能就是變化，歷史的車輪滾滾向前，它不會因任何人的消極緩慢而中止。時代拋棄你時，連一聲再見都不會說。

　　從最開始的Javascrpit、到後來的Jquery、（ExtJs、EasyUI、MiniUI）、Bootstrap、Layui，再到現在的mvvm框架（Vue.js、Angular.js、React.js），整個前端的發展趨勢一直在改變。

　　就拿Jquery來講，在Dom操做領域無疑是一代霸主，它擊敗了全部Dom領域的競爭對手，卻輸給了時代，mvvm框架的出現，讓它頓時黯然失色。

　　這不禁得讓我想起大潤發。大潤發創始人離職時說：打敗了全部對手，卻輸給了時代。大潤發在零售行業是一個號稱19年不關一家店的傳奇商場。在商場這個領域裏，沒有任何人能戰勝它，包括沃爾瑪/家樂福，可是很惋惜他敗給了這個時代，被阿里巴巴收購，高層集體走人。

　　聽說在程序員界有那麼一條鄙視鏈：每個程序員應該都據說過程序員鄙視鏈，作c的看不起作c++的，作c++看不起作java的，作java看不起作.net的，而後這些人都看不起搞PHP或前端的，能夠說，前端程序員應該處於程序員鄙視鏈的底端。若是你看了以上這些慘絕人寰的鄙視鏈以後，仍然沒有擊倒你想要作程序員的心，那我必須提醒你一件最重要的事：先去交一個女友，再來學寫程序；由於一旦你成爲軟件工程師以後，就交不到女友了。

      早期的前端俗稱美工、切圖仔，天天的工做就是切圖、寫寫html、寫寫css。現在前端變得愈來愈重，早已不復當年，各類新技術突飛猛進、層出不窮，前端要學的東西太多，其學習的難度絲絕不低於後端。

　　最近這幾年，前端的發展實在太快。Node.js的出現，更是將前端的發展提高到了一個新的境界。Node.js開啓了前端模塊化、組件化的進程，新技術層出不窮，各類mvc、mvvm框架也流行了起來。

網站交互方式

    網站交互有兩種經常使用的方式：

• 經典的多頁面
• 現代式的單頁面

　　由多頁面組成的站點，咱們稱之爲多頁應用，由單頁面組成的站點稱之爲單頁應用。

　　在過去，許多Web後臺經常使用UI框架，如ExtJs、EasyUI等等，經過iframe來嵌套頁面，表面上看起來像單頁應用，其本質其實依舊是多頁應用。

多頁Web應用（MPA）

　　每一次頁面跳轉的時候，後臺服務器都會給返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫作多頁應用。

　　多頁應用以服務端爲主導，先後端混合。例如：.php文件、aspx文件、jsp文件。

　　特色：

• 用戶體驗通常，每次跳轉都會刷新整個頁面
• 頁面切換慢，等待時間過長
• 每一個頁面都要從新加載渲染，速度慢
• 首屏時間快，SEO效果好（蜘蛛會爬連接）
• 先後端糅合在一塊兒，開發和維護效率低

爲何多頁應用的首屏時間快？

　　首屏時間叫作頁面首個屏幕的內容展示的時間，當咱們訪問頁面的時候，服務器返回一個html，頁面就會展現出來，這個過程只經歷了一個HTTP請求，因此頁面展現的速度很是快。

爲何搜索引擎優化效果好（SEO）？

　　搜索引擎在作網頁排名的時候，要根據網頁內容才能給網頁權重，來進行網頁的排名。搜索引擎是能夠識別html內容的，而咱們每一個頁面全部的內容都放在Html中，因此這種多頁應用，seo排名效果好。

爲何切換慢？

　　由於每次跳轉都須要發出一個http請求，若是網絡比較慢，在頁面之間來回跳轉時，就會發現明顯的卡頓。

單頁Web應用（SPA）

　　單頁Web應用（single page web application），簡稱SPA，就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

　　單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，全部的操做都在這張頁面上完成，都由JavaScript來控制。

　　單頁應用開發技術複雜，因此誕生了一堆的開發框架：Angular.js、Vue.js、React.js。

      單頁應用，先後端分離，各司其職，服務端只處理數據，前端只處理頁面（二者經過接口來交互）。

單頁應用的優勢

• 用戶體驗好，就像一個原生的客戶端軟件同樣使用，切換過程當中不會頻繁有被「打斷」的感受。
• 先後端分離，開發方式好，開發效率高，可維護性好。服務端不關心頁面，只關心數據；客戶端不關係數據庫及數據操做，只關心經過接口拿到數據和服務端交互，處理頁面。
• 局部刷新，只須要加載渲染局部視圖便可，不須要整頁刷新。
• 徹底的前端組件化，前端開發再也不以頁面爲單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整。
• API 共享，若是你的服務是多端的（瀏覽器端、Android、iOS、微信等），單頁應用的模式便於你在多個端共用 API，能夠顯著減小服務端的工做量。容易變化的 UI 部分都已經前置到了多端，只受到業務數據模型影響的 API，更容易穩定下來，便於提供更棒的服務。
• 組件共享，在某些對性能體驗要求不高的場景，或者產品處於快速試錯階段，藉助於一些技術（Hybrid、React Native），能夠在多端共享組件，便於產品的快速迭代，節約資源。

   單頁應用的缺點

• 首次加載大量資源：要在一個頁面上爲用戶提供產品的全部功能，在這個頁面加載的時候，首先要加載大量的靜態資源，這個加載時間相對比較長；
• 對搜索引擎不友好：由於界面的數據絕大部分都是異步加載過來的，因此很難被搜索引擎搜索到。
• 開發難度相對較高：開發者的JavaScript技能必須過關，同時須要對組件化、設計模式有所認識，他所面對的再也不是一個簡單的頁面，而是相似一個運行在瀏覽器環境中的桌面軟件。

• 兼容性：單頁應用雖然已經很成熟了，可是都沒法兼顧低版本瀏覽器

表1.1-單頁應用和多頁應用對比

比較點	多頁應用模式MPA	單頁應用模式SPA
應用構成	由多個完整頁面構成	一個外殼頁面和多個頁面片斷構成
跳轉方式	頁面之間的跳轉是從一個頁面跳轉到另外一個頁面	頁面片斷之間的跳轉是把一個頁面片斷刪除或隱藏，加載另外一個頁面片斷並顯示出來。這是片斷之間的模擬跳轉，並無開殼頁面
跳轉後公共資源是否從新加載	是	否
URL模式	http://xxx/page1.html http://xxx/page1.html	http://xxx/shell.html#page1 http://xxx/shell.html#page2
用戶體驗	頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設備上	頁面片斷間的切換快，用戶體驗好，包括在移動設備上
可否實現轉場動畫	沒法實現	容易實現（手機app動效）
頁面間傳遞數據	依賴URL、cookie或者localstorage，實現麻煩	由於在一個頁面內，頁面間傳遞數據很容易實現
搜索引擎優化（SEO）	能夠直接作	須要單獨方案作，有點麻煩
特別適用的範圍	須要對搜索引擎友好的網站 須要兼顧低版本瀏覽器的網站	對體驗要求高的應用，特別是移動應用。 管理系統
開發難度	低一些，框架選擇容易	高一些，須要專門的框架來下降這種模式的開發難度
CSS和JS文件加載	每一個頁面都須要加載本身的CSS和JS文件	整個項目的CSS和JS文件只須要加載一次
頁面Dom加載	瀏覽器須要不停的建立完整的DOM樹，刪除完整的DOM樹	瀏覽器只須要建立一個完整的DOM樹，此後的僞頁面切換其實只是在換某個div中的內容
頁面請求	全部頁面請求都是同步的——客戶端在等待服務器給相應的時候，瀏覽器中一片空白	全部的「僞頁面請求」都是異步請求——客戶端在等待下一個頁面片斷到來時，仍能夠顯示前一個頁面內容——瀏覽器體驗更好
HTML頁面數	項目中有多個完整的HTML頁面	整個項目中只有一個完整的HTML頁面；其餘HTML文件都是HTML片斷。

　　說明：如今除了一些電商網站，其實已經不多有系統須要去兼容低版本的瀏覽器，大部分是IE9以上的瀏覽器。而用戶想要擁有更好的上網操做體驗，就不得不選擇高版本的瀏覽器。若是不須要考慮SEO的項目，建議採用單頁應用的開發方式，由於這樣能夠先後端徹底分離，提升開發效率，用戶體驗只是其次。

先後端分離的開發模式

    前端端分離的開發模式基本流程一般以下：

1. 項目立項
2. 需求分析
3. 服務端的工做

• 需求分析
• 數據庫設計
• 接口設計（有時候也須要前端參與其中）
• 接口開發

1. 前端的工做

• 需求分析
• 寫界面和功能
• 經過接口和服務端交互

先後端分離的開發方式，不管是多頁應用仍是單頁應用均可以採用，可是多頁應用採用先後端分離模式的狀況一般比較少。

前端的主要工做是什麼？主要負責MVC中的V這一層；主要工做就是和界面打交道，來製做前端頁面效果；

前端三大開發框架

單頁應用開發實際上是比較複雜的，須要必定的技術支撐。因此一些前端框架應運而生。

Vue.js和Angular.js、React.js 一塊兒，併成爲前端三大主流框架。

Angular

• 09年誕生
• Google
• 它的目的就是讓咱們開發單頁應用變得更方便了
• 它主要爲前端帶了mvvm開發模式，這是一個偉大的變革
• mvvm：數據驅動視圖，不操做DOM

React

• Facebook公司本身開發的一個Web框架
• 組件化

Vue

• Vue做者：尤雨溪
• 早期由我的開發，在國內很火
• Vue借鑑了Angular和React之所長，屬於後起之秀

　　前端三大主流框架各有千秋，對於規模不大的前端項目來講，Vue 因其極易上手會被列出首選之位，而Angular 在快速開發大型 Web 項目上很受推崇，但仍存諸多缺陷，React則爲 JavaScript 應用開發者提供新的開發方式。

　　若是硬是要給這三大框架一個排名，目前排名是React、Vue、Angular。從目前國內的總體行情看，一些中小企業，更青睞於Vue。做爲一名開發者，咱們無需糾結哪一個更好，對咱們而言，不一樣的框架或者不一樣的語言，它們都只是一個工具而已，是咱們解決問題的工具。

　　Vue.js 是目前最火的一個前端框架，而React是最流行的一個前端框架（React除了開發網站，還能夠開發手機App， 固然Vue一樣也能夠用於進行手機App開發，須要藉助於Weex，並且沒有React那麼強大）。

　　Vue.js最火，表示想要學習的人員最多，React最流行，表示目前正在使用的人最多。而Angular 的流行度已呈現明顯下滑趨勢。甚至有人說：「對於 Angular 2，我想我永遠不會再使用。 由於它帶來的問題遠遠多於解決的問題。 它須要豐富的知識經驗來構建大型應用程序，不然老是會遇到性能問題。

　　現在最火熱的前端需求在於移動端，而再也不是 Web 。React Native 很是成功，同時它也會帶動 React.js 的發展。Vue.js目前 只在 Web 前端中佔據主導地位，而不會統治全部的前端領域。React 則能夠在全部的前端領域中盛行。這是爲何？

　　由於Vue.js 未能提供替代 React Native 的可行性方案（Weex 和 Quasar 太年輕，存在碎片化而且很脆弱），伴隨着 React Native 和 React.js 的爆發式增加，若是你掌握了 Web 前端的 React 和 Redux ，你將得到極大優點：只要你想，即可在幾周內熟練地將 React Native 應用到移動端。

　　而使用 Vue.js 編寫 Web 的前端人員幾周就能掌握 React Native，因此無論怎麼說，學習Vue.js都是很是值得的。使人興奮的是：」截止至目前爲止，Vue在github上的start數已經超越了react，咱中國開發人員有着卓著的貢獻，我很是看好Vue，也爲咱中國人感到自豪！

爲何要學習流行框架（mvvm框架）

• 企業爲了提升開發效率：在企業中，時間就是效率，效率就是金錢。而使用框架，可以提升開發的效率。
• 提升開發效率的發展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js
• 在Vue中，一個核心的概念，就是讓用戶再也不操做DOM元素，解放了用戶的雙手，讓程序員能夠更多的時間去關注業務邏輯；
• 加強本身就業時候的競爭力

　　mvvm框架可以幫助咱們減小沒必要要的DOM操做；提升渲染效率；雙向數據綁定的概念：經過框架提供的指令，咱們前端程序員只須要關心數據的業務邏輯，再也不關心DOM是如何渲染的了。

　　在Vue中，一個核心的概念，就是讓用戶再也不操做DOM元素，從而解放用戶的雙手，讓程序員能夠有更多的時間去關注業務邏輯。

框架和庫的區別

框架：是一套完整的解決方案；對項目的侵入性較大，項目若是須要更換框架，則須要從新架構整個項目。

框架舉例：

• node 中的express
• Java中的spring boot

庫（插件）：提供某一個小功能，對項目的侵入性較小，若是某個庫沒法完成某些需求，能夠很容易切換到其它庫來實現需求。

例如：

• 從Jquery 切換到 Zepto
• 從 EJS 切換到 art-template

參考文獻

https://baike.baidu.com/item/SPA/17536313?fr=aladdin

http://pixeljets.com/blog/vue-js-vs-react-what-to-expect-in-2018/

https://www.jianshu.com/p/bae4f6604549

http://www.javashuo.com/article/p-fuduytsv-cs.html

https://www.jianshu.com/p/4c9c29967dd6

https://blog.csdn.net/qq_39579242/article/details/82703150