web前端框架有哪些？前端框架怎么學(xué)習(xí)？

　　extjs框架

　　ExtJS是一種主要用于創(chuàng)建前端用戶界面，是一個基本與后臺技術(shù)無關(guān)的前端ajax框架。

　　ExtJs初期僅是對Yahoo! UI的對話框擴(kuò)展，后來逐漸有了自己的特色，深受網(wǎng)友的喜愛。 發(fā)展至今， Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該框架完全基于純Html/CSS+JS技術(shù)，提供豐富的跨瀏覽器UI組件，靈活采用JSON/XML數(shù)據(jù)源開發(fā)，使得服務(wù)端表示層的負(fù)荷真正減輕，從而達(dá)到客戶端的MVC應(yīng)用!

　　Sencha Ext JS提供了開發(fā)人員構(gòu)建數(shù)據(jù)密集型跨平臺Web應(yīng)用程序所需的一切。Ext JS利用現(xiàn)代瀏覽器上的HTML5功能。

　　Ext JS具有115多種高性能，預(yù)測試和集成的UI組件，包括日歷，網(wǎng)格，圖表等。Ext JS Grid和Advanced Charting包可以輕松處理數(shù)百萬條記錄。該框架包括一個強(qiáng)大的數(shù)據(jù)包，可以使用來自任何后端數(shù)據(jù)源的數(shù)據(jù)。借助Sencha Pivot Grid和D3適配器，組織可以為其Web應(yīng)用程序添加領(lǐng)先的可視化和分析功能。查看與其他框架的比較。

　　豐富的Ext JS工具和主題集有助于提高開發(fā)效率并加速提供外觀漂亮的Web應(yīng)用程序。工具可用于幫助應(yīng)用程序設(shè)計(jì)，開發(fā)，主題和調(diào)試以及構(gòu)建優(yōu)化和部署。

　　Sencha Test是一個補(bǔ)充產(chǎn)品，是Ext JS Apps最全面的單元和端到端測試解決方案。

　　extjs框架優(yōu)勢：

　　1、預(yù)集成和測試的UI組件。

　　Ext JS包含業(yè)界最全面的預(yù)集成和測試高性能UI組件集合。這些組件包括HTML5日歷，網(wǎng)格，樞軸網(wǎng)格，D3適配器，樹，列表，表單，菜單，工具欄，面板，窗口等等。Sencha社區(qū)也提供數(shù)百個用戶擴(kuò)展。

　　Sencha Grid使組織能夠處理數(shù)百萬條記錄，并提供開箱即用的功能，如排序，分組，列鎖定和摘要行。

　　Ext JS Calendar組件可幫助您輕松查看/管理Ext JS應(yīng)用程序中的計(jì)劃和事件。通過利用此組件，您可以輕松地為應(yīng)用程序添加功能齊全的日歷，而無需投入大量時間和精力來構(gòu)建一個。

　　2、豐富的數(shù)據(jù)分析

　　Ext JS使組織能夠使用Sencha Pivot Grid為其Web應(yīng)用程序添加強(qiáng)大的分析功能。它允許用戶匯總，匯總和分析多維數(shù)據(jù)，以做出更明智的決策。

　　Sencha Grid使組織能夠處理數(shù)百萬條記錄，并提供開箱即用的功能，如排序，分組，列鎖定和匯總行。

　　Exporter插件使您能夠以各種不同的格式導(dǎo)出Ext JS Grid和Pivot Grid數(shù)據(jù)。它支持標(biāo)準(zhǔn)的XLSX，XML，CSV，TSV和HTML格式，并允許您配置數(shù)據(jù)導(dǎo)出的可見(顯示)或不可見(隱藏)部分。Exporter插件還支持導(dǎo)出文檔的基本樣式。

　　3、復(fù)雜的數(shù)據(jù)可視化.

　　D3 Adapter使您可以向Web應(yīng)用程序添加復(fù)雜的數(shù)據(jù)驅(qū)動文檔包(D3)可視化，如熱圖，樹圖，旭日等。現(xiàn)在，您可以創(chuàng)建動態(tài)可視化，不僅可以講述特定的故事，還可以幫助您的用戶瀏覽他們的數(shù)據(jù)并了解它必須講述的故事。

　　Ext JS Charting軟件包允許您直觀地表示包含各種動態(tài)和靜態(tài)圖表的數(shù)據(jù) - 包括直線圖，條形圖和餅圖。圖表使用使用SVG，VML和Canvas技術(shù)實(shí)現(xiàn)的繪圖包開發(fā)的曲面和精靈。瀏覽器變體會自動處理，因此圖表始終可以正確顯示。Ext JS Charts還支持移動設(shè)備上的觸摸手勢，從而為圖表提供增強(qiáng)的交互功能，如平移，縮放和捏合。

　　4、后端不可知數(shù)據(jù)包。

　　Ext JS中包含的強(qiáng)大數(shù)據(jù)包將UI組件與數(shù)據(jù)層分離。數(shù)據(jù)包允許使用功能強(qiáng)大的模型進(jìn)行客戶端數(shù)據(jù)收集，這些模型提供排序和過濾等功能。數(shù)據(jù)包與協(xié)議無關(guān)，可以使用來自任何后端源的數(shù)據(jù)。它具有會話管理功能，允許多個客戶端操作，最大限度地減少到服務(wù)器的往返。

　　5、布局管理器和響應(yīng)配置。

　　Ext JS包含一個靈活的布局管理器，可幫助組織跨多個瀏覽器，設(shè)備和屏幕大小的數(shù)據(jù)和內(nèi)容顯示。它可以幫助您控制組件的顯示，即使對于最復(fù)雜的用戶界面也是如此。Ext JS還提供了一個響應(yīng)式配置系統(tǒng)，允許應(yīng)用程序組件適應(yīng)特定的設(shè)備方向(橫向或縱向)或可用的瀏覽器窗口大小。

　　6、符合Section 508的可訪問性包(ARIA)。

　　Ext JS ARIA Package通過提供實(shí)現(xiàn)Section 508合規(guī)性所需的工具，可以為您的應(yīng)用程序添加輔助功能支持。使用ARIA軟件包，您可以創(chuàng)建可供需要輔助技術(shù)(如屏幕閱讀器)的人員使用的應(yīng)用程序來瀏覽網(wǎng)頁。

　　7、可定制的內(nèi)置主題。

　　Ext JS組件有多種內(nèi)置主題，包括Material，Triton，Classic，Neptune和Crisp。主題可自定義以反映特定的品牌標(biāo)識。Sencha Cmd公開了Ext JS主題使用的數(shù)百個變量，可以改變這些變量來設(shè)計(jì)自定義主題。

　　YUI框架

　　Yahoo !UI Library (YUI)是一個開放源代碼的JavaScript函數(shù)庫，為了能建立一個高互動的網(wǎng)頁，它采用了AJAX,DHTML和DOM等程式碼技術(shù)。它也包含了許多CSS資源。 YUI 基于BSD協(xié)議，對所有的使用方式都是免費(fèi)的。YUI 項(xiàng)目包括YUI 庫和兩個創(chuàng)建時工具： YUI Compressor (壓縮) 和 YUI Doc (JavaScripts代碼的文檔引擎)。

　　YUI分為兩個大類,一個是Ajax組件,里面包括對底層javascript包裝后的幾個工具包,分別是connection,event, dom,animation,dnd.還包括一組高級的javascript控件，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

　　另一類是幾個很有用的幾個CSS文件，一個是CSS Page Grids，用它可以很方便的布局你的網(wǎng)頁。另外兩個是Standard CSS Fonts和Standard CSS Reset,利用這兩個CSS可以對字體等在不同瀏覽器中獲得一致的效果.

　　Sencha Touch 框架

　　Sencha Touch 是全球領(lǐng)先的應(yīng)用程序開發(fā)框架，其設(shè)計(jì)旨在充分利用HTML5、CSS3 和Javascript 來實(shí)現(xiàn)***別的功能、靈活性和優(yōu)化。Sencha Touch 是針對下一代具有觸摸屏設(shè)備的跨平臺框架。

　　它是針對企業(yè)級移動應(yīng)用程序開發(fā)的完美解決方案。Sencha Touch 這款應(yīng)用程序利用嚴(yán)格的代碼標(biāo)準(zhǔn)和經(jīng)典的遺留模型創(chuàng)建而成，可供小型或大型團(tuán)隊(duì)輕松簡便地使用。而且由于其輸出完全基于 web，您可以在您自己的團(tuán)隊(duì)中部署您的應(yīng)用程序，不必等候本地市場的批準(zhǔn)或驗(yàn)收。

　　特點(diǎn)：

　　1、支持世界上最好的設(shè)備。Beta版兼容Android和iOS，Android上的開發(fā)人員還可以使用一些專為Android定制的主題。

　　2、數(shù)據(jù)集成。提供了強(qiáng)大的數(shù)據(jù)包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。

　　3、基于最新的WEB標(biāo)準(zhǔn) – HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，通過禁用一些組件還會使它更小。

　　4、.增強(qiáng)的觸摸事件。在touchstart、touchend等標(biāo)準(zhǔn)事件基礎(chǔ)上，增加了一組自定義事件數(shù)據(jù)集成，如tap、swipe、pinch、rotate等。

　　LAYUI框架

　　LAYUI 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。

　　layui 首個版本發(fā)布于2016年金秋，她區(qū)別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說，她更多是為服務(wù)端程序員量身定做，你無需涉足各種前端工具的復(fù)雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

　　事實(shí)上，layui更多是面向于后端開發(fā)者，所以在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。layui 定義為“經(jīng)典模塊化”，并非是刻意強(qiáng)調(diào)“模塊”理念本身，而是有意避開當(dāng)下 JS 社區(qū)的主流方案，試圖以盡可能簡單的方式去詮釋高效!它的所謂經(jīng)典，是在于對返璞歸真的執(zhí)念，它以當(dāng)前瀏覽器普通認(rèn)可的方式去組織模塊! layui 認(rèn)為這種輕量的組織方式，仍然可以填補(bǔ) WebPack 以外的許多場景。所以它堅(jiān)持采用經(jīng)典模塊化，也正是能讓人避開工具的復(fù)雜配置，重新回歸到原生態(tài)的 HTML/CSS/JavaScript本身!
       前端技術(shù)在當(dāng)今表現(xiàn)出多元且越來越復(fù)雜的一面，如果您對前端感興趣的話，歡迎隨時報名傳智播客的web前端培訓(xùn)班