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

　　extjs框架

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

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

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

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

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

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

　　extjs框架優(yōu)勢(shì)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　YUI框架

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

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

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

　　Sencha Touch 框架

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

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

　　特點(diǎn)：

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

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

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

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

　　LAYUI框架

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

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

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