前端三大框架（Angular Vue React）

前端，HTML（超文本標記語言），CSS（層疊樣式表）和JavaScript（腳本語言）

HTML，一般說的h5，其實按標準來講，HTML4的後續版本不帶編號了，並保證向前的兼容性

CSS的版本3，增長了translate()，能完成之前必定須要js才能作到的動畫，同時增長了flex彈性盒子（響應式設計，提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間，以往使用float）

 

前端框架

1、Bootstrap

在Bootstrap的官網介紹中，Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 大體意思就是：Bootstrap是最受歡迎的HTML、CSS和JS框架，用於開發響應式佈局、移動設備優先的Web項目，用於開發響應式佈局，是一套用於 HTML、CSS 和 JS 開發的開源工具集。

Bootstrap的設計以移動設備優先，在網頁的 head 之中添加 viewport meta 標籤

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap使用一個容器元素來包裹網站的內容，使用類.container（固定寬度並支持響應式佈局的容器）和.container-fluid（用於 100% 寬度，佔據所有視口（viewport）的容器），具體的就看教程吧（https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html，自帶部分jQuery插件，3教程以後）

一般說 Bootstrap是一種前端框架，我的感受其實這種說法不是很準確，Bootstrap的框架和Angular等說的框架，此框架非彼框架，Bootstrap更多感受是一種頁面UI的佈局，經過一系列定義好的CSS class和一些預約義好的jquery插件實現好比過渡、下拉、摺疊、輪播的初步效果

或者，Bootstrap是一種UI，用於前端佈局的框架，屬於css框架，而不是javascript框架，可是它自己也使用javascript來完善Bootstrap框架的視覺效果

 

2、AmazeUI、LayUI

我的知道還不錯的兩款國產前端佈局UI，部分功能須要使用js才能實現，採用自身模塊規範編寫，模塊化的組件（lay官網還能直接拖動看效果和代碼），感受很棒

https://www.layui.com
http://amazeui.org

 

3、jQuery

jQuery 是一個 JavaScript函數庫，極大地簡化了 JavaScript 編程。jQuery 是目前最流行的 JS 框架，並且提供了大量的擴展。

官網：https://jquery.com，中文手冊：http://www.xgllseo.com/jq3/index-2.html，jQueryUI：http://jqueryui.com（用戶界面交互、特效、小部件及主題）

基礎語法：$(select).action()，jQuery的選擇器和CSS同樣，類選擇器 .class，id的選擇器 #id，sass寫法 >

$(document).ready(function(){
     //jQuery 入口函數
});

$("button").click(function(){
    //jQuery 點擊事件
});

jQuery感受是封裝了一部分的函數，簡化了原生js的寫法，在實際使用時，jQuery對DOM樹進行操控，即：首先有一個寫好的html頁面，再對其修改操做

如寫按鈕事件函數，點擊隱藏，切換，頁面跳轉等

 

4、三大框架

以前使用jQuery，目前處於初學框架階段，處於選擇一個框架學習的階段，我的拙見，錯望指正

一般說的三大框架，即：Angular Vue React

Angular （注：2，1的版本和2的版本簡直是兩種語言）是基於 TypeScript（Javascript超集）的 Javascript 框架。React 被描述爲 用於構建用戶界面的 JavaScript 庫，Vue 爲一款用於構建直觀，快速和組件化交互式界面的 MVVM 框架

Angular 是一個框架而不是一個庫，是一個完整的解決方案。React 和 Vue 更靈活的。Angular 必須用 TypeScript，文檔均是TS的

　　由於數據雙向綁定和寫法的問題，我的暫時不考慮學React。抱着對Google大大深深的愛，本身看了Angular 6的官方文檔，而後，我發現我一句都看不懂，好吧，我認可我很菜，可是好歹給我個但願啊，可是相比之下，Vue官方的教程學習曲線簡直不要太友好

 

不知道本身的理解是否是對的，Angular的使用致使了不論以後進行什麼修改，都須要使用Angular的寫法，而Vue由於其模塊化，故能夠在項目的部分使用Vue，進行修改時，即便是其餘框架的項目也可使用Vue.js進行修改。

之前一個學長告訴個人：說輕量級的展現頁面使用jQuery，管理後臺使用框架。jQuery的編程思想是首先編寫HTML和CSS的頁面展現再操做DOM樹，而框架是首先考慮頁面的功能，再進行前端的展現，編程思想正好相反。（我的學習中，待以後回來驗證該說法）

 

選擇哪一種框架，參考說法：https://juejin.im/post/5a0d5df1f265da43062a542f

若是你在Google工做：Angular

若是你喜歡 TypeScript：Angular（或React）

若是你喜歡面向對象編程（OOP）: Angular

若是你須要指導手冊，架構和幫助：Angular

若是你在Facebook工做：React

若是你喜歡靈活性：React

若是你喜歡大型的技術生態系統：React

若是你喜歡在幾十個軟件包中進行選擇：React

若是你喜歡JS和「一切都是 Javascript 的方法」：React

若是你喜歡真正乾淨的代碼：Vue

若是你想要最平緩的學習曲線：Vue

若是你想要最輕量級的框架：Vue

若是你想在一個文件中分離關注點：Vue

若是你一我的工做，或者有一個小團隊：Vue（或 React）

若是你的應用程序每每變得很是大：Angular（或 React）

若是你想用 react-native 構建一個應用程序：React

若是你想在圈子中有不少的開發者：Angular 或 React

若是你與設計師合做，並須要乾淨的 HTML 文件：Angular or Vue

若是你喜歡 Vue 可是懼怕有限的技術生態系統：React

若是你不能決定，先學習 React，而後 Vue，而後 Angular