2023學(xué)年完整公開課版前端框架

前端框架1.了解前端框架

2.掌握常見開源前端框架1、學(xué)好Web框架熟悉掌握HTML、服務(wù)器端腳本語言、CSS和JavaScript之后，學(xué)習(xí)Web框架可以加快Web開發(fā)速度，節(jié)約時(shí)間。PHP程序員可選的框架包括CakePHP、CodeIgniter、Zend等，Python程序員喜歡使用Django和webpy，Ruby程序員常用RoR。2、開源前端框架BootstrapBootstrap是美國(guó)Twitter公司的設(shè)計(jì)師MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript開發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得Web開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。主流框架之一，Bootstrap是基于HTML、CSS、JavaScript的，它簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷。2、開源前端框架MeteorMeteor是一個(gè)full-stackjavascript平臺(tái)，可用于開發(fā)web和移動(dòng)應(yīng)用。其最大特點(diǎn)是其（通過websocket）保持客戶端連接的“實(shí)時(shí)”框架。數(shù)據(jù)庫（mongodb）的改變可“實(shí)時(shí)”展示到界面中。Meteor是新一代的開發(fā)即時(shí)web應(yīng)用的開源框架，它能在較短時(shí)間內(nèi)完成開發(fā)。2、開源前端框架html5-boilerplateHTML5Boilerplate——最流行的web開發(fā)前端模版，幫你構(gòu)建快速,健壯,并且適應(yīng)力強(qiáng)的webapp或網(wǎng)站。其特點(diǎn)如下：一個(gè)干凈、移動(dòng)終端友好的HTML模版優(yōu)化過的Google統(tǒng)計(jì)代碼包含了Normalize.cssv1版本—一個(gè)先進(jìn)的、支持HTML5的CSSreset—和基礎(chǔ)樣式、輔助功能、多媒體查詢、打印樣式自帶了兩個(gè)優(yōu)秀的Javascript工具庫的最新版本：jQuery(默認(rèn)鏈接到Google的CDN,如果CDN失效，本地文件作為后備)和Modernizr瀏覽器特性監(jiān)測(cè)工具庫高性能：提供了一組Apache配置參數(shù)，幫你提高網(wǎng)站的性能、該框架可以快速構(gòu)建健壯，且適應(yīng)力強(qiáng)的webapp或網(wǎng)站。2、開源前端框架SemanticUI如今，一個(gè)工具好不好用，在很大程度上要看它是不是集成了很多的好用的模塊。semanticUI就是這樣一款工具，集成了很多很漂亮的UI模塊，能夠使網(wǎng)頁制作更加高效和美觀。當(dāng)然，追求個(gè)性化和靈活性的同學(xué)還是要自己寫CSS更好一點(diǎn)，因?yàn)檫@樣我們的創(chuàng)意就不會(huì)被工具所束縛，當(dāng)然缺點(diǎn)是做網(wǎng)頁的速度會(huì)慢一點(diǎn)。手寫CSS是一件很麻煩的事情，在這里推薦你使用一個(gè)CSS框架：SemanticUI，這個(gè)框架比起B(yǎng)ootstrap來，使用起來更加語義化，更容易上手，也更好看。2、開源前端框架FoundationFoundation是在國(guó)外比較流行在國(guó)內(nèi)的使用就比較少，在兼容上Foundation在Foundation4就已經(jīng)放棄了IE8的支持這點(diǎn)可能也是在國(guó)內(nèi)使用者少的原因之一，F(xiàn)oundation在js庫中使用的是Zepto（就是輕量級(jí)的JQueryFoundation4就已經(jīng)把mobilefirst放在首要開發(fā)Foundation用于開發(fā)響應(yīng)式的HTML,CSSandJavaScript框架。2、開源前端框架Materialize實(shí)現(xiàn)UI組件有助于構(gòu)建有吸引力，一致和功能的網(wǎng)頁和網(wǎng)絡(luò)應(yīng)用程序，同時(shí)堅(jiān)持現(xiàn)代網(wǎng)絡(luò)設(shè)計(jì)原則，如瀏覽器可移植性，設(shè)備獨(dú)立性和優(yōu)雅的降級(jí)。它有助于創(chuàng)建更快，更美觀，更靈敏的網(wǎng)站。它的靈感來自GoogleMaterialDesign。Materialize是一個(gè)使用CSS，JavaScript和HTML創(chuàng)建的UI組件庫。2、開源前端框架PurePure是一個(gè)CSS框架，源自雅虎。Pure的框架是基于響應(yīng)式的，整個(gè)框架非常輕量級(jí)，壓縮為gzip文件僅為3.7KB*。Pure包含的組件樣式較多，比如：有表單、表格、表、按鈕、導(dǎo)航等等，標(biāo)識(shí)的使用也很簡(jiǎn)單。Pure自帶的樣式以及已定義好的類名，可以調(diào)整出更豐富漂亮的控件樣式、布局幾乎可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊。2、開源前端框架VueVue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue采用自底向上增量開發(fā)的設(shè)計(jì)。Vue的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。Vue.js的目標(biāo)是通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件

[2]

。Vue.js自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫一起使用時(shí)，Vue.js也能完美地驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。Vue.js是用于構(gòu)建交互式的Web界面的庫。它提供了MVVM數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的API。2、開源前端框架AmazeUI該產(chǎn)品系列中有專門針對(duì)移動(dòng)端的HTML5混合應(yīng)用開發(fā)框架AmazeUITouch以及針對(duì)跨屏HTML5網(wǎng)頁開發(fā)的AmazeUIWeb。其中，AmazeUITouch可以幫助開發(fā)者通過豐富的組件，快速構(gòu)建出與原生APP相媲美的專屬移動(dòng)端的HTML5應(yīng)用。國(guó)內(nèi)首個(gè)開源HTML5跨屏前端框架產(chǎn)品系列，中文排版支持更優(yōu)、本土化組件豐富2、開源前端框架Ulkit1、UIkit基于LESS開發(fā)，代碼結(jié)構(gòu)清晰簡(jiǎn)單，易于擴(kuò)展和維護(hù)。

2、具有體積小、反應(yīng)靈敏的響應(yīng)式組件，使用一致的、無沖突的命名規(guī)則。3、可根據(jù)UIKit基本的風(fēng)格及樣式，輕松地自定義創(chuàng)建出自己喜歡的主題樣式。4、根據(jù)不同的屏幕分辨率與上網(wǎng)設(shè)備，UIKit會(huì)自動(dòng)做出響應(yīng)，提供一致的體驗(yàn)。一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開發(fā)和功能強(qiáng)大的web接口。2、開源前端框架KISSYKISSY是淘寶的前端類庫，幾乎在淘寶的每個(gè)頁面上都能看到它的身影。

KISSY是一款跨終端、模塊化、高性能、使用簡(jiǎn)單的JavaScript框架。除了完備的工具集合如DOM、Event、Ajax、Anim等，它還提供了經(jīng)典的面向?qū)ο?、?dòng)態(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的JavaScript框架，KISSY為移動(dòng)終端做了大量適配和優(yōu)化，讓你的程序在全終端均能流暢運(yùn)行。一款跨終端、模塊化、高性能、使用簡(jiǎn)單的JavaScript框架。2、開源前端框架MUIMUI主要有三種含義：一、一種單獨(dú)發(fā)行的計(jì)算機(jī)操作系統(tǒng)Windows的多語種版本；二、世界上最權(quán)威的Halal認(rèn)證的官方機(jī)構(gòu)；三、在移動(dòng)通訊技術(shù)中的專有名詞。最接近原生APP體驗(yàn)的高性能前端框架2、開源前端框架AraleArale擁有popup、validator、position等豐富且優(yōu)秀的組件模塊

，模塊API設(shè)計(jì)簡(jiǎn)潔，迭代迅速，推崇適度重復(fù)和組合大于繼承的原則。人性化的文檔、豐富的演示和完善的測(cè)試用例是Arale對(duì)自有模塊的要求。Arale使用簡(jiǎn)單好用的包管理工具SPM幫助我們處理打包部署等繁瑣工作；使用spm提供的源服務(wù)來發(fā)布