剛工作那會，前端都是用html+css+js來寫的,現在各種前端框架層出不窮，基本都是引入前端框架來構建前端，為什麼？
一、什麼是框架
框架是乙個可復用的設計構件，它規定了應用的體系結構，闡明了整個設計、協作構件之間的依賴關係、責任分配和控制流程，表現為一組抽象類以及其實例之間協作的方法，框架的關鍵還在於框架內物件間的互動模式和控制流模式。應用框架強調的是軟體的設計重用性和系統的可擴充性,以縮短大型應用軟體系統的開發周期，提高開發質量。框架其實就是某種應用的半成品，就是一組元件，供你選用完成你自己的系統。簡單說就是使用別人搭好的舞台，你來做表演。而且，框架一般是成熟的，不斷公升級的軟體。
前端框架也是框架，是框架更具體的分類，是隨著前端功能的增強而產生的，對於往應用方向發展（也就是越來越像客戶端）的web產品就很必要做前端架構這件事，它開始以模型為中心，dom操作只是附加，通過關注點分離鼓勵改進應用程式。未來的發展趨勢是前後端只靠json資料進行通訊，後端只處理和傳送一段json到前端，計算和模板渲染都在前端進行，後台程式不再做模板的任何處理。有效實現前後端的解耦，簡化開發流程，便於維護管理，可以把精力更多放到業務邏輯，提公升開發效率。
二、前端框架的特點：
1.宣告式& 資料驅動渲染
react提供的jsx和vue提供的模板目的是為了實現宣告式渲染的功能。不論是jsx，或者是vue中的模板，本質上都是描述了『狀態』與『檢視』之間的對映關係。所以宣告式渲染是框架的特性。宣告了對映關係之後，可以得到乙個公式：
ui =render(state)
狀態與檢視之間的對映關係，等同於render函式。jsx與vue的模板在這一點上是相同的。在框架的內部，不論是jsx還是vue的模板，最終會編譯成render函式。上面這個公式，輸入的是state，輸出的是dom。所以輸入變了輸出就變了，這個特性就是我們常說的資料驅動檢視。
這裡會引出乙個問題，框架必須要知道web應用在執行時」狀態「是否發生了變化，然後才能使用前面提到的公式重新輸出乙個新的ui。所以如何知道web應用的狀態在執行時是否發生了變化這個問題是所有框架必須去解決的。解決方案有很多種。不同框架，或者同乙個框架的不同版本對這個問題的解決方案都不同，但相同的是都可以解決問題。
2. 元件化
現代主流框架都具備的乙個特性是「元件」，它們都會以「元件」作為乙個基本的抽象單元。可能不同的框架，它所提供的操控元件的方式不一樣，但概念上是相似的。
之前聽過一次尤雨溪的知乎live，他將實際應用中的元件分為四種型別並依次介紹了四種元件之間的區別：
（1）展示型元件：展示型元件是最直接也是最常用的元件，就是用資料渲染檢視，「資料進，dom出」。
（2）接入型元件：接入型元件通常會跟接入資料的service層打交道。包含一些和伺服器或資料來源打交道的邏輯，然後接入型元件會將資料往下傳，傳給比較簡單的展示型元件。在react中這種型別的元件被稱為「容器元件（containercomponent）」。
（3）互動型元件：互動型元件典型的例子是對表單元件的封裝和增強。大部分元件庫，像elementui都是以互動型元件為主。這一類元件會有比較複雜的互動邏輯，但是它是乙個非常通用的邏輯，所以它強調復用。
（4）功能型元件：功能型元件是比較抽象的元件。用vue舉例，路由的和vue自帶的都屬於功能型元件。它本身不渲染任何內容，它是乙個邏輯型的元件。它通常作為乙個擴充套件或一種抽象機制存在。
不同框架操控元件的方式可能不一樣，但使用元件的「心法」永遠是一樣的。這就是關注特性帶來的好處，你可以切換到任意乙個框架，使用元件或封裝元件時，總是上面列出的幾種型別。掌握了「心法」的程式設計師在切換框架時，他的狀態通常是這樣的：我現在想寫乙個互動型元件，這個框架都提供了哪些api？去翻翻文件看一下。然後就可以寫出乙個很優雅的元件出來，哪怕剛使用這個框架才不到一天。如果沒有掌握「心法」，用了乙個框架寫出的**很糟糕，那麼換了乙個框架也不會寫出更好的**，甚至更糟糕。
3.路由
在前端框架中都是前端路由，可以保證效能和使用者體驗的層面來比較的話，後端路由每次訪問乙個新頁面的時候都要向伺服器傳送請求，然後伺服器再響應請求，這個過程肯定會有延遲。而前端路由在訪問乙個新頁面的時候僅僅是變換了一下路徑而已，沒有了網路延遲，對於使用者體驗來說會有相當大的提公升。 在某些場合中，用ajax請求，可以讓頁面無重新整理，頁面變了但url沒有變化，使用者就不能複製到想要的位址，用前端路由做單頁面網頁就很好的解決了這個問題。
4.良好周邊以及社群
乙個框架的成長必然離不開別人的輔助公升級。不斷吸收新的想法使得框架走的會越來越好。
5、其他特性
（1）狀態和資料流管理
（2）cli工具
（3）同構/服務端渲染
（4）css管理方案
三、總結
為什麼使用前端框架，不再從零用html、css和js寫頁面，主要是提高開發效率。既然叫框架，我們就可以引人該框架（舞台），我們只需要在上邊跳舞即可，沒必要自己在搭建舞台了。前端框架三巨頭react、angular和 vue，雖然都很受歡迎，且保持著上公升趨勢，但vue 爆發力最強，但在使用率上，仍低於react。我構建前端專案用的是vue.js，vue的整體思想是擁抱經典的web 技術，並在其上進行擴充套件，之前html、css、js也比較熟。
vue ui框架 你為什麼要使用前端框架Vue
1.前端框架的根本意義 1.1 前端框架的好處 最開始學習前端框架的時候 我第乙個框架是 react 並不理解框架能帶來什麼,只是因為大家都在用框架,最實際的乙個用途就是所有企業幾乎都在用框架,不用框架就 out 了.隨著使用的深入我逐漸理解到框架的好處 1.2 前端框架的根本意義 簡單來說,前端框...
為什麼需要自己實現前端框架
前端對框架 庫 的大小更敏感 便於制定載入策略 核心部分的js在發布時，可對檔案合併，數量盡可能少，單個檔案在gzip壓縮後最好不要超過20k。核心部分可以是實現 js語言擴充套件 物件導向 dom操作api，資料互動方法 ajax 導航策略，模組化底層實現，事件底層實現，模版解析 等。擴充套件部分...
為什麼使用thinkphp5框架
1 運算元據庫簡單 1 模型 將增刪改查簡化，類似運算元組的方式運算元據庫和字段 2 連線資料庫簡化 不使用框架的時候，我在每個需要運算元據庫的php檔案，都引入了一次連線資料庫的檔案，在框架裡不需要 2 路由 沒使用框架的時候，頁面很單一，頁面的內容重新整理，其實是通過echo不同的內容實現，引數...