1. 程式人生 > >前端資源大整理

前端資源大整理

導致 css3動畫 移動 規模 comm 視圖 str 運行程序 csshake

資源不斷更新中。。。

動畫庫
1.Animate.css
說明:一個簡單易用的跨瀏覽器CSS動畫庫。
GitHub主頁: https://github.com/daneden/animate.css

2.CSShake
說明:用CSS實現各種顛顫動畫效果DOM!
GitHub主頁: https://github.com/elrumordelaluz/csshake

3.Hover.css
說明:將鼠標Hover效果快速應用在你的網頁元素或創意設計上。
GitHub主頁:https://github.com/IanLunn/Hover

4.Velocity.js
說明:幫你加速JavaScript動畫。
GitHub主頁:https://github.com/julianshapiro/velocity

5.DynCSS
說明:用動態CSS來打造你的網頁。
GitHub主頁:https://github.com/vzaccaria/DynCSS

6.Magic Animations
說明:可創造CSS3動畫特效。
GitHub主頁:https://github.com/miniMAC/magic

7.Bounce.js
說明:即時創造漂亮的CSS3動畫。
GitHub主頁: https://github.com/tictail/bounce.js

前端框架和類庫
1.lodash.js
簡介:具有一致接口、模塊化、高性能等特性的 JavaScript 工具庫
GitHub主頁:https://github.com/lodash/lodash/

2.Underscore.js
簡介:JavaScript 工具庫,它提供了一整套函數式編程的實用功能,但是沒有擴展任何 JavaScript 內置對象。 他解決了這個問題:“如果我面對一個空白的 HTML 頁面,並希望立即開始工作,我需要什麽?” 他彌補了 jQuery 沒有實現的功能,同時又是 Backbone 必不可少的部分。

3.AngularJS
簡介:AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言,但要構建WEB應用的話它就顯得乏力了。
GitHub主頁:https://github.com/angular/angular.js

4.React
簡介:React 是一個用於構建用戶界面的 JAVASCRIPT 庫。主要用於構建UI,很多人認為 React 是 MVC 中的 V(視圖)。
GitHub主頁:https://github.com/facebook/react

5.Vue.js
簡介:Vue.js是一個用於構建用戶界面的輕量級漸進框架。它提供了一個類似React的虛擬DOM驅動視圖層,可以與其它類庫集成,用於構建強大的單頁面應用。該框架是由之前在AngularJS工作過的Evan You創建的,他提取了AngularJS中自己喜歡的部分。

Vue.js使用HTML模板語法將DOM綁定到實例數據。Model是在數據改變時更新view的純JavaScript對象。
GitHub主頁:https://github.com/vuejs/vue
官方地址:https://cn.vuejs.org/


6.Backbone.js
簡介:Backbone.js是提供服務器端框架中常見的MVC結構的最早客戶端選項之一。它唯一的依賴是Underscore.js。
Backbone.js聲稱是一個類庫,因為它可以與其它項目集成,但是我覺得大多數開發人員都認為它是一個框架。
GitHub主頁:https://github.com/jashkenas/backbone/

7.Ember.js
簡介:Ember.js是基於Model-View-ViewModel(MVVM)模式的框架之一。它在單個包中實現模板化、數據綁定和類庫。
GitHub主頁:https://github.com/emberjs/ember.js


前端工具
1.Gulp.js
簡介:雖然Gulp不是第一個任務執行工具,它卻很快成為了最受歡迎的。Gulp使用易於閱讀的JavaScript代碼,將源文件加載到流中,並在將數據輸出到構建文件夾之前,通過各種插件管理數據。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。
GitHub主頁:https://github.com/gulpjs/gulp

2.NPM
簡介:npm是Node.js包管理器,但其腳本工具可用於運行通用任務。對於具有少量依賴關系的簡單項目來說,這是一個很好的選擇。然而,更復雜的任務可能會變得不太適用。
GitHub主頁:https://github.com/npm/npm

3.Grunt
簡介:Grunt是第一批被大規模采用的JavaScript任務執行工具之一,但其速度和復雜的JSON配置卻導致了Gulp的興起。現在這些問題已經得到了解決,Grunt仍然是一個受歡迎的選擇。
GitHub主頁:https://github.com/gruntjs/grunt

4.WebPack
簡介:Webpack支持所有流行的模塊選項,並已成為React開發的代名詞。雖然Webpack聲稱是一個模塊捆綁程序,但是已經可以用作通用任務運行程序了。
GitHub主頁:https://github.com/webpack/webpack

5.Browserify
簡介:Browserify支持Node.js正在使用的CommonJS模塊,它將所有模塊編譯成單個瀏覽器兼容的文件。
GitHub主頁:https://github.com/substack/node-browserify

6.RequireJS
簡介:RequireJS是一種瀏覽器中的模塊加載器,它也可以在Node.js中使用。
GitHub主頁:https://github.com/jrburke/r.js

7.ESLint
簡介:ESLint是一種可插拔的代碼分析工具。每個規則都是一個插件,因此可以根據個人喜好進行配置。
GitHub主頁:https://github.com/eslint/eslint

8.JSHint
簡介:JSHint是一個靈活的JavaScript代碼分析工具,它很好的平衡了真正的錯誤和老舊的語法。
GitHub主頁:https://github.com/jshint/jshint

9.JSLint
簡介:JSLint是最早的代碼分析工具之一,它實現了一套嚴格的默認規則。
GitHub主頁:https://github.com/reid/node-jslint

10.Jasmine
簡介:Jasmine是一個行為驅動的測試工具,可以在瀏覽器中自動測試UI和交互。
GitHub主頁:https://github.com/jasmine/jasmine-npm

11.QUnit
簡介:QUnit是一個單元測試框架,可以在輸入特定參數時,檢查函數結果。它還上報測試結果,確保沒有錯過特定的代碼分支。
GitHub主頁:https://github.com/kof/node-qunit

CSS框架
1.Bootstrap – 最流行的Web前端UI框架
Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。它使用了最新的瀏覽器技術,Bootstrap提供了時尚的排版樣式,表單,buttons,表格,網格系統等等。
官方網站:http://getbootstrap.com/

2.jQuery UI Bootstrap
它是jQuery UI和Bootstrap的集成,它是Bootstrap樣式的,因此外觀比較漂亮,同時它擁有jQuery UI的控件功能,這也方便開發者快速地創建一個網頁控件。

3.BootMetro - Metro風格的CSS框架
BootMetro是一款基於Bootstrap的前端UI框架,BootMetro的特點是可以很方便地構建類似Windonws 8扁平化風格的網頁界面,效果非常不錯。
官方網站:http://aozora.github.io/bootmetro/

4.Flat UI - 扁平風格 UI 工具包
Flat UI是一套精美的扁平風格 UI 工具包,基於 Twitter Bootstrap 實現。這套界面工具包含許多基本的和復雜的 UI 部件,例如按鈕,輸入框,組合按鈕,復選框,單選按鈕,標簽,菜單,進度條和滑塊,導航元素等等。
官方網站:https://github.com/designmodo/Flat-UI

5.網易CSS框架 NEC
NEC是網易推出的開源前端CSS框架,NEC提供了豐富UI代碼庫和插件,可以極大的幫助開發人員提高開發效率。即使你並非前端專業開發人員,利用NEC你也可以快速地構建屬於自己的網頁應用。
官方網站:http://nec.netease.com/

6.Alloy UI – 功能強大的CSS UI框架
Alloy UI是基於YUI 3的前段UI框架,包含一套豐富的(超過60)UI 部件,如圖片庫,對話框,樹形結構,面板,自動完成,按鈕,日歷控件,工具條等。
官方網站:http://alloyui.com/

7.Cardinal – 移動端的CSS UI框架
Cardinal 是一個小型的移動優先的 CSS 框架,提供很多有用的默認樣式、可縮放排版、可重用模塊和一個簡單的響應式表格系統。
官方網站:http://cardinalcss.com/

8.快速開發CSS的框架 CSScaffold
不同於許多CSS框架,它必須依靠PHP與Apache的mod_rewrite來執行,但也因為需要這兩種東西,讓CSScaffold變得很神奇、很方便,寫起CSS來又快又輕松!
官方網站:http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

9.後臺UI開發框架 MuseUI
一款基於bootstrap風格,兼容於主流瀏覽器(包括IE6)的後端UI開發組件。
官方網站:http://git.oschina.net/muse/museui

手冊大全
1.jQuery API 中文文檔
http://www.jquery123.com/

2.seajs手冊
http://cyj.me/why-seajs/zh

3.vue api
https://cn.vuejs.org/v2/api/

4.bootstrap4手冊
http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

5.CSS 語法參考
https://tympanus.net/codrops/css_reference/

6.mozilla js參考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript


參考:www.cnblogs.com/powertoolsteam/p/front_end_framework_2017.html
http://www.codeceo.com/article/top-10-css-ui-framework.html

前端資源大整理