版權聲明:本文為部落客原創文章,未經部落客允許不得轉載。 https://blog.csdn.net/w178191520/article/details/78839749
資源不斷更新中。。。
動畫庫
1.Animate.css
說明:一個簡單易用的跨浏覽器CSS動畫庫。
GitHub首頁:
https://github.com/daneden/animate.css2.CSShake
說明:用CSS實作各種颠顫動畫效果DOM!
https://github.com/elrumordelaluz/csshake3.Hover.css
說明:将滑鼠Hover效果快速應用在你的網頁元素或創意設計上。
GitHub首頁:
https://github.com/IanLunn/Hover4.Velocity.js
說明:幫你加速JavaScript動畫。
https://github.com/julianshapiro/velocity5.DynCSS
說明:用動态CSS來打造你的網頁。
https://github.com/vzaccaria/DynCSS6.Magic Animations
說明:可創造CSS3動畫特效。
https://github.com/miniMAC/magic7.Bounce.js
說明:即時創造漂亮的CSS3動畫。
https://github.com/tictail/bounce.js前端架構和類庫
1.lodash.js
簡介:具有一緻接口、子產品化、高性能等特性的 JavaScript 工具庫
https://github.com/lodash/lodash/2.Underscore.js
簡介:JavaScript 工具庫,它提供了一整套函數式程式設計的實用功能,但是沒有擴充任何 JavaScript 内置對象。 他解決了這個問題:“如果我面對一個空白的 HTML 頁面,并希望立即開始工作,我需要什麼?” 他彌補了 jQuery 沒有實作的功能,同時又是 Backbone 必不可少的部分。
3.AngularJS
簡介:AngularJS是為了克服HTML在建構應用上的不足而設計的。HTML是一門很好的為靜态文本展示設計的聲明式語言,但要建構WEB應用的話它就顯得乏力了。
https://github.com/angular/angular.js4.React
簡介:React 是一個用于建構使用者界面的 JAVASCRIPT 庫。主要用于建構UI,很多人認為 React 是 MVC 中的 V(視圖)。
https://github.com/facebook/react5.Vue.js
簡介:Vue.js是一個用于建構使用者界面的輕量級漸進架構。它提供了一個類似React的虛拟DOM驅動視圖層,可以與其它類庫內建,用于建構強大的單頁面應用。該架構是由之前在AngularJS工作過的Evan You建立的,他提取了AngularJS中自己喜歡的部分。Vue.js使用HTML模闆文法将DOM綁定到執行個體資料。Model是在資料改變時更新view的純JavaScript對象。
https://github.com/vuejs/vue官方位址:
https://cn.vuejs.org/6.Backbone.js
簡介:Backbone.js是提供伺服器端架構中常見的MVC結構的最早用戶端選項之一。它唯一的依賴是Underscore.js。Backbone.js聲稱是一個類庫,因為它可以與其它項目內建,但是我覺得大多數開發人員都認為它是一個架構。
https://github.com/jashkenas/backbone/7.Ember.js
簡介:Ember.js是基于Model-View-ViewModel(MVVM)模式的架構之一。它在單個包中實作模闆化、資料綁定和類庫。
https://github.com/emberjs/ember.js前端工具
1.Gulp.js
簡介:雖然Gulp不是第一個任務執行工具,它卻很快成為了最受歡迎的。Gulp使用易于閱讀的JavaScript代碼,将源檔案加載到流中,并在将資料輸出到建構檔案夾之前,通過各種插件管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。
https://github.com/gulpjs/gulp2.NPM
簡介:npm是Node.js包管理器,但其腳本工具可用于運作通用任務。對于具有少量依賴關系的簡單項目來說,這是一個很好的選擇。然而,更複雜的任務可能會變得不太适用。
https://github.com/npm/npm3.Grunt
簡介:Grunt是第一批被大規模采用的JavaScript任務執行工具之一,但其速度和複雜的JSON配置卻導緻了Gulp的興起。現在這些問題已經得到了解決,Grunt仍然是一個受歡迎的選擇。
https://github.com/gruntjs/grunt4.WebPack
簡介:Webpack支援所有流行的子產品選項,并已成為React開發的代名詞。雖然Webpack聲稱是一個子產品捆綁程式,但是已經可以用作通用任務運作程式了。
https://github.com/webpack/webpack5.Browserify
簡介:Browserify支援Node.js正在使用的CommonJS子產品,它将所有子產品編譯成單個浏覽器相容的檔案。
https://github.com/substack/node-browserify6.RequireJS
簡介:RequireJS是一種浏覽器中的子產品加載器,它也可以在Node.js中使用。
https://github.com/jrburke/r.js7.ESLint
簡介:ESLint是一種可插拔的代碼分析工具。每個規則都是一個插件,是以可以根據個人喜好進行配置。
https://github.com/eslint/eslint8.JSHint
簡介:JSHint是一個靈活的JavaScript代碼分析工具,它很好的平衡了真正的錯誤和老舊的文法。
https://github.com/jshint/jshint9.JSLint
簡介:JSLint是最早的代碼分析工具之一,它實作了一套嚴格的預設規則。
https://github.com/reid/node-jslint10.Jasmine
簡介:Jasmine是一個行為驅動的測試工具,可以在浏覽器中自動測試UI和互動。
https://github.com/jasmine/jasmine-npm11.QUnit
簡介:QUnit是一個單元測試架構,可以在輸入特定參數時,檢查函數結果。它還上報測試結果,確定沒有錯過特定的代碼分支。
https://github.com/kof/node-qunitCSS架構
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-UI5.網易CSS架構
NECNEC是網易推出的開源前端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.D3.js 入門教程
教程位址2.ECMAScript 6 入門 --阮一峰
3.React入門教程
4.TypeScript入門教程
5.Velocity.js中文文檔
6.Webpack 2.2 中文文檔
7.七天學會NodeJS
8.廖雪峰-Git教程
9.廖雪峰-javascript教程
前端常用插件
1.jQuery内容滾動插件-BoxSlider
插件位址2.jQuery artDialog對話框插件
3.移動端日期選擇元件
4.圖像延遲加載庫Echo.js
5.輪播圖FlexSlider插件
6.Slick.js幻燈片使用方法
7.JavaScript響應式輪播圖插件–Flickity
8.Intro.js 分步向導插件使用方法
9.ScrollReveal-元素随頁面滾動産生動畫的js插件
10.支援移動觸摸的jQuery圖檔Lightbox插件
11.Owl Carousel幻燈片插件
12.kissui.scrollanim頁面滾動動畫庫插件
13.jQuery cxSelect 關聯下拉菜單
14.jQuery cxCalendar 日期選擇器
15.jQuery Transit 過渡效果插件
16.lightslider-支援移動觸摸的輕量級jQuery幻燈片插件
17.WOW.js滾動頁面産生動畫
18.FullPage.js全屏插件
19.animate.css動畫庫