當前位置:首頁 » 網頁前端 » pure系統前端框架
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

pure系統前端框架

發布時間: 2022-07-19 01:10:58

1. 現在主流的前端框架有哪些

現在前端主要流行三大框架。給大傢具體分析一下這三個前端框架:

1、Angular

大家眼裡比較「叼」的框架,甚至有人說三大框架中只有她能稱的上一個完整的框架,因為他包含的東西比較完善,包含模板,數據雙向綁定,路由,模塊化,服務,過濾器,依賴注入等所有功能。對於剛開始學習使用框架的小夥伴們,可以推薦這個框架,學會之後簡直能顛覆之前你對前端開發的認知。使用 TypeScript能夠提高代碼可維護性,有利於後期重構。雙向數據流很方便,但是等業務復雜之後,你可能就搞不清楚數據流了。還有令人不開心的臟值檢查,以及directive的封裝並沒有解決視圖與數據關系完全分離,有時候還要用$digist強制觸發檢測。

2、React

這個框架本身比較容易理解,他的結構很清晰,就是由十幾個API組成,然後非同步渲染,我們只需要處理好介面和維護就好了,但是很多人反映上手還是有一定的的難度的。React是單向數據流,代碼寫起來會較雙向數據流的多一些,但是同樣的排查問題時思路清晰很多。

3、Vue

號稱是最簡單,最容易上手的框架,同時也是行內的大趨勢,還可以用來開發最火的小程序。畢竟用這神器,代碼碼的飛快,項目也能快速上線。同時他也是雙向數據流。有些人認為Vue是Angular和React的結合,既有Angular的模板語法也有React的組件化體系。

當你學會其中某個框架之後,你再轉用其他框架的時候,學會是很容易的,因為方法都是大同小異的。具體的使用還是得看公司的項目適合或者要求哪個框架。

2. 學習web前端需要了解的幾個主流框架

前端領域最近幾年發展的特別迅速,可以說是百家爭鳴。在底層的前端框架領域中,最早是jquery稱霸互聯網,近兩年MVVM類型的框架慢慢成為主流,Vue、React和Angular三大框架並駕齊驅。可以說,目前這四種是開發者用的最多使用最廣的底層框架。

下面根據自己工作中、關注中的一些前端框架進行了梳理,對於現在的開發者來說,都向著全棧方向發展,所以必須掌握些前端比較流行的框架,這樣才能增強自己的技術體系框架,也對自己將來構架之路進行鋪路。

1、Bootstrap

Bootstrap是最流行的前端開發框架,可以讓不是前端工程師也能開發出優美的頁面,更加快捷、方便的開發web頁面和移動端應用。也能開發響應式web頁面,上手也非常快。中文

3. 2015年有哪些比較優秀的前端框架

作者:匿名用戶
鏈接:http://www.hu.com/question/39377015/answer/81017680
來源:知乎
著作權歸作者所有,轉載請聯系作者獲得授權。

此榜單根據github上star數作為排名依據,一個人力量有限,如果收集有遺漏歡迎補充。
1、名稱:Bootstrap
類別/語言:HTML、CSS、JavaScript
創建者: Twitter
人氣:在Github上有91007 stars
描述:主流框架中毋庸置疑的老大,Bootstrap 是基於 HTML、CSS、JavaScript 的,它簡潔靈活,使得 Web 開發更加快捷。
核心概念/原則: RWD 和移動優先制。
瀏覽器支持: Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
響應式: Yes
模塊化: Yes
官網地址:Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Github地址:twbs/bootstrap · GitHub
2、名稱:html5-boilerplate
類別/語言:HTML、CSS、JavaScript
創建者:Paul Irish
人氣:在Github上有32,349 stars
描述:HTML5 Boilerplate 幫你構建 快速, 健壯, 並且 適應力強 的web app或網站。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE8+,Edge,Opera
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:HTML5 Boilerplate: T
Github地址:h5bp/html5-boilerplate · GitHub
3、名稱:Meteor
類別/語言:HTML、CSS、JavaScript
創建者:immir
人氣:在Github上有31,092 stars
描述:Meteor是新一代的開發即時web應用的開源框架,它能幫助你在最少的時間內完成開發。
核心概念/原則:響應式
預處理器: Less
響應式: Yes
模塊化: Yes
官網地址:Meteor
Github地址:meteor/meteor · GitHub
4、名稱:Semantic UI
類別/語言:HTML、CSS、JavaScript
創建者: Jack Lukic
人氣: 在Github上有22,325 stars
描述: 「基於自然語言有效原則的UI組件框架」
核心概念/原則: 語義,標簽的矛盾性、響應式
瀏覽器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10。
預處理器: Less
響應式: Yes
模塊化: Yes
官網地址:Semantic UI
Github地址:Semantic-Org/Semantic-UI · GitHub
5、名稱:Foundation
類別/語言:HTML、CSS、JavaScript
創建者: ZURB
人氣: 在Github上有22,206+ stars
描述: 「世界上最優秀的響應式前端框架」
核心概念/原則: RWD 、手機優先、語義的
瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
預處理器: Sass
響應式: Yes
模塊化: Yes
官網地址:Foundation | The most advanced responsive front-end framework in the world.
Github地址:zurb/foundation-sites · GitHub

6、名稱:Materialize
類別/語言:CSS
創建者:Google
人氣:在Github上有15,288stars
描述:Materialize是一個個基於材料設計的一個現代化的響應式前端框架。他們做了最繁重的工作,為您提供默認的樣式,結合了您的自定義組件。此外,他們還改進動畫和過渡,為開發人員提供流暢的體驗。
核心概念/原則:響應式
預處理器:Sass
響應式:Yes
模塊化:Yes
官網地址:Documentation
Github地址:Dogfalo/materialize · GitHub
瀏覽器支持:Chrome 35+, Firefox 31+, Safari 7+, IE 10+
7、名稱:Pure
類別/語言:CSS
創建者: Yahoo
人氣: 在Github上有13,161 stars
描述: 「您可以在每一個web項目中使用的一組小的和響應式的CSS模塊」
核心概念/原則:SMACSS,極簡的.
瀏覽器支持:Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
預處理器: None
響應式: Yes
模塊化: Yes
官網地址:http://purecss.io/
Github地址:yahoo/pure · GitHub
8、名稱:Vue
類別/語言:CSS、JavaScript
創建者:尤雨溪
人氣:在Github上有12,214 stars
描述:Vue.js 是用於構建互動式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統,具有簡單、靈活的 API。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE9+,Android 4.2+,iOS 7+
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:vue.js
Github地址:vuejs/vue · GitHub
9、名稱:Skeleton
類別/語言:CSS、JavaScript
創建者:Dave Gamache
人氣:在Github上有10,622stars
描述:Skeleton 是一個小的 JS 和 CSS 文件的集合,可幫你快速開發漂亮的網站,適合各種屏幕設備包括手機。Skeleton 基於 960 grid 開發。它是一個 UI 框架。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE10+,Opera
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:Skeleton: Responsive CSS Boilerplate
Github地址:dhg/Skeleton · GitHub
10.名稱: Amaze UI
類別/語言:HTML、CSS、JavaScript
創建者:雲適配
最後更新時間:2015年12月
人氣:在Github上有6425 stars
描述:國內首個開源HTML5跨屏前端框架,中文排版支持更優、本土化組件豐富。
並在2015年11月推出基於 React.js 的專屬移動端 Web 組件庫Amaze UI touch。
核心概念/原則:組件化、移動優先、輕量級、高性能。
瀏覽器支持: Firefox, Chrome, Safari, IE8+
響應式: Yes
模塊化: Yes
官網地址:Amaze UI | 中國首個開源 HTML5 跨屏前端框架
Github地址:amazeui/amazeui · GitHub
11、名稱:UIkit
類別/語言:HTML、CSS、JavaScript
創建者: YOOtheme
人氣: 在Github上有6,050+ stars
描述: 「一個輕量級的和模塊化的前端框架,用於快速開發和功能強大的web介面。」
核心概念/原則:RWD, 手機優先.
預處理器: Less, Sass
響應式: Yes
模塊化: Yes
官網地址:UIkit
Github地址:uikit/uikit · GitHub
瀏覽器支持: Chrome, Firefox, Safari, IE9+
12、名稱:Yui
類別/語言:CSS、JavaScript
創建者:Yahoo
人氣:在Github上有3,200+ stars
描述:Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫,為了能建立一個高互動的網頁,它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證
核心概念/原則:響應式
預處理器: None
響應式:Yes
模塊化:Yes
官網地址:http://yuilibrary.com/
Github地址:yui/yui3 · GitHub
瀏覽器支持:Firefox, Chrome, Safari, IE10+,Opera
13.名稱:kissy
類別/語言: JavaScript
創建者:淘寶前端
最後更新時間:2015年7月
人氣:在Github上有2035 stars
描述:KISSY 是一款跨終端、模塊化、高性能、使用簡單的 JavaScript 框架。
框架大小: 37 KB
核心概念/原則: 模塊化,跨終端,高擴展性
模塊化: Yes
官網地址:KISSY - A Powerful JavaScript Framework
Github地址:kissyteam/kissy · GitHub
14.名稱:MUI
類別/語言: HTML、CSS、JavaScript
創建者:Dclould
最後更新時間:2016年1月
人氣:在Github上有2012 stars
描述:MUI-最接近原生App體驗的前端框架框架。
核心概念/原則: 多端發布、高性能
響應式: NO
模塊化: Yes
官網地址:MUI-最接近原生APP體驗的高性能前端框架
Github地址:dcloudio/mui · GitHub
15.名稱:Arale
類別/語言: JavaScript
創建者:支付寶前端
最後更新時間:2015年7月
人氣:在Github上有1252 stars
描述:Arale 是一個開放、簡單、易用的前端基礎類庫。
框架大小:未知
核心概念/原則: 開放、簡單、易用
瀏覽器支持:Firefox, Chrome, Safari, IE6+
響應式: Yes
模塊化: Yes
官網地址:Arale - 隨心構建互聯網應用
Github地址:aralejs/aralejs.org · GitHub

16.名稱:JX
類別/語言:Javascript
創建者:騰訊前端
最後更新時間:2015年12月
人氣:在Github上有952 stars
描述:JX 是模塊化的非侵入式Web前端框架,特別適合構建和組織大規模、工業級的Web App。
框架大小: 未知
核心概念/原則: 保持最優執行效率
瀏覽器支持: 兼容主流瀏覽器
模塊化: Yes
官網地址:JX - 騰訊 Web 前端開發框架
Github地址:AlloyTeam/JX · GitHub
17.名稱:GMU
類別/語言:HTML、CSS、JavaScript
創建者:網路前端
最後更新時間:2015年12月
人氣:在Github上有940stars
描述:GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件! Web App。
核心概念/原則: 簡單易用、輕量級
模塊化: Yes
官網地址:http://gmu..com/
Github地址:fex-team/GMU · GitHub
18.名稱:ZUI
類別/語言: HTML、CSS、JavaScript
創建者:蟬道
最後更新時間:2015年7月
人氣:在Github上有616 stars
描述:開源HTML5前端框架
核心概念/原則:簡單易用、輕量級、易於定製
瀏覽器支持:未知
官網地址:ZUI - 開源HTML5跨屏框架
Github地址:easysoft/zui · GitHub
19.名稱:Clouda Touch.js
類別/語言:JavaScript
創建者:網路雲
人氣:在Github上有387 stars
描述:Touch.js是移動設備上的手勢識別與事件庫,也是在網路內部廣泛使用的開發。
核心概念/原則: 無入侵設計、媲美原生的交互、極簡的API
模塊化: Yes
官網地址:Touch.js
Github地址:Clouda-team/touch.code..com · GitHub
20.名稱:Arkui
類別/語言:HTML、CSS、JavaScript
創建者:豆瓣
人氣:在Github上有129 stars
模塊化: Yes
官網地址:arkui
Github地址:mockee/arkui · GitHub

4. 幾個Web前端開發框架的比較

Bootstrap

Bootstrap是目前可用框架中無可爭議的領導者。其人氣日益增長,你可以放心的選擇這個框架,而不必擔心項目會失敗,因為具有廣泛使用基礎的框架,不太可能被拋棄。

  • 創造者:YOOtheme

  • 發行:2013

  • 當前版本:3.0.0

  • 人氣:GitHub GitHub上有9,422顆星

  • 說明:「用於開發快速而強大的Web界面的輕量級和模塊化的前端框架」。

  • 核心概念/原則:RWD,移動端優先

  • 框架大小:326.9 KB(如果包含uikit-icons.min.js與SVG圖標相關的功能,則為384.4KB)

  • 預處理器:少,Sass

  • 響應式布局:是

  • 模塊化:是

  • 啟動模板/布局:是

  • 圖標集:UIkit自帶SVG圖標系統和類庫,其中包含越來越多的大綱圖標。

  • 額外/附加組件:是

  • 獨特的組件:Article, Flex, Cover, HTML Editor

  • 文件:好

  • 自定義:高級GUI定製程序僅在版本2(以前的版本)中可用

  • 瀏覽器支持:Chrome,Firefox,Safari,IE9 +

  • 許可證:MIT

  • UIkit說明

    UIkit成功應用在許多WordPress主題中。它提供了靈活和強大的手動定製機制(以前版本的框架還提供了高級GUI定製程序)。

    什麼是最適合你的框架?

    在選擇框架時,可以從以下幾個方面考慮:

  • 所選的框架有足夠的人氣嗎?更多的人氣意味著更多的人參與項目,也意味著有更多的教程和社區文章、更多的實例和網站、更多的第三方擴展、更好的相關的Web產品可與其集成。受歡迎程度也意味著框架更具前瞻性,因為具有更大社區的框架不太可能被拋棄。

  • 框架是否正在積極發展?一個好的框架需要不斷地使用最新的web技術,特別是在移動端方面。

  • 框架是否達到成熟?如果一個特定的框架在現實項目中還沒有被使用和測試,那麼將其用於你的專業項目,可能不是一個明智的選擇。

  • 框架是否提供了良好的文檔?為了方便學習過程,總是需要良好的文檔。

  • 框架的特異性是什麼?這里的要點是,與具有高級別特異性的框架相比,更通用的框架更容易使用。在大多數情況下,最好選擇一個應用最小樣式的框架,因為它更容易自定義。與重寫現有的CSS規則相比,添加新的CSS規則是一個更方便有效的做法。

  • 如果你還不確定使用哪個框架,那麼可以採用混合搭配的方式。當某個特定的框架不能滿足你的需求時,可以混合使用兩個或多個項目的組件。

    最後值得一提的是,現在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持,比以往任何時候都更容易構建復雜的布局。這可能會鼓勵更多的開發人員放棄前端框架,從頭開始編寫他們自己想要的布局。

    來源:網頁鏈接

    5. 移動webapp前端ui用哪個框架好

    WeUI
    WeUI是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
    Frozen UI
    Frozen UI是騰訊社交用戶體驗設計 - 增值UI開發團隊一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規范,選取最常用的組件,
    做成手Q公用離線包減少請求,升級方式友好,文檔完善,目前全面應用在騰訊手Q增值業務中。
    FrozenUI提供的CSS組件是目前QQ會員前端開發組所用的通用樣式庫。遵循手Q樣式規范,基本樣式使用離線包的方式減少請求,並提供快速接入的方案。
    FrozenUI提供的一系列JavaScript插件,更優雅地在移動端上呈現更靈動的動畫效果。
    FrozenJS 是針對移動端開發的 js 組件庫,其依賴 zepto.js 和 FronzenUI。
    FrozenJS 的所有組件均以 zepto 的插件的形式存在。
    阿里開源的SUI Mobile
    SUI Mobile
    SUI Mobile 是一套基於 Framework7 開發的UI庫。並參考 Ratchet、Fastclick 開源庫。它非常輕量、精美,只需要引入我們的CDN文件就可以使用,並且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平台Web App。
    輕量的UI庫 SUI Mobile 非常輕量,核心庫壓縮Gzip後的JS、CSS網路傳輸體積總共只有52K,卻提供了20+個常用的組件。
    對於只有HTML&CSS的組件,你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件,並且提供了Zepto/jQuery 風格的API,你將會非常熟悉這種方式。
    開發團隊:阿里巴巴共享業務事業部UED團隊
    網路系
    GMU
    GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件!
    Jingle
    Jingle是一個SPA(Single Page Application)開發框架,用來開發移動端的html5應用,在體驗上盡量去靠近native應用,希望有一天html5能夠做到與native一樣的操作體驗。
    豐富的UI組件提供了按鈕、列表、表單、彈出框、輪換、上拉/下拉、日歷等各種移動端常用的組件,簡單適用,
    前後端分離支持前端模板渲染,模板按需自動載入,完善的事件機制。
    輕量級基於Zepto開發,依賴了iscrol
    purecss
    purecss採用其Grid的部分即可,需要定製的部分,建議自行配置,或者是直接採用grid.css,grid960.css這樣的柵格來處理。Purecss小的沒有節操,全部模塊gzip壓縮後才 4.4KB* 。 考慮到移動端,保持文件盡量小對我們來說非常重要,每一行CSS都經過深思。如果你只用部分模塊,簡直小的忽略。
    Pure基石,Pure基於Normalize.css添加了HTML元素的布局和樣式,以及常用的UI組件。全是精華,木有糟粕。
    移動端是初衷,Pure是響應式的盒子模型,適應所有尺寸的屏幕。通過皮膚生成器可以自定義樣式。
    寫出你自己的樣式,Pure提供最基礎的樣式,鼓勵你基於此寫出自己的樣式。它被設計為容易覆寫,且不影響你自己的樣式。
    ionic
    基於angular2,豐富的UI組件,大大改進的編程模型,非常適合快速開發。
    jquery mobile
    jQuery Mobile 是創建移動 web 應用程序的框架。
    jQuery Mobile 適用於所有流行的智能手機和平板電腦。
    jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
    Bootstrap
    Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式布局、移動設備優先的 WEB 項目。

    wex5
    國產的ui,支持打包。
    前端UI:完全恪守html5+css3+js,干凈純潔設備api:採用業界主流Phonegap/Cordova
    向導、模板:簡單定義,即可輕松製作向導和模板
    主題、樣式:海量bootstrap資源引入和定製
    UI組件:純H5+CSS3,輕松引入第三方UI組件
    插件:輕松對接即時通訊、推送、支付等各類插件
    後端:輕松調用後端組件和api,並實現可視化

    6. 前端現在常用的框架有哪些

    js框架主要有:vue,react,angular,jquery等。
    css框架主要有:bootstrap,element ui等。

    7. puremvc是前端還是後端

    puremvc是通用 MVC 框架

    8. 前端框架有哪些

    1、Bootstrap是最流行的前端開發框架,可以讓不是前端工程師也能開發出優美的頁面,更加快捷、方便的開發web頁面和移動端應用。也能開發響應式web頁面,上手也非常快。

    中文官網:http://www.bootcss.com/

    9. 除了bootstrap 還有什麼優秀的前端框架

    除了 Bootstrap 和 Semantic-UI,其他的 UI 框架:
    Google Material UI
    Ant Design
    Element UI
    jQuery UI
    ...
    都各有優缺點,Semantic-UI 體積有點大,但寫起來相當方便,UI 也具有現代感,推薦使用。對於有經驗的人,可以結合多種框架,使用不同的組件。

    10. 前端常用的框架有哪些

    jQuery,Vue,Bootstrap,react。