JavaScript 移動和觸摸框架

 jQuery Mobile : 是 jQuery 在手機上和平板設備上的版本號。

jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫，而且會公佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說：能開發這個項目。咱們很興奮。移動Web太需要一個跨瀏覽器的框架，讓開發者開發出真正的移動Web站點。

咱們將盡全力去知足這種需求。 Sources.

Zepto.js Zepto.js 是支持移動WebKit瀏覽器的JavaScript框架，具備與jQuery兼容的語法。

2-5k的庫，經過不錯的API處理絕大多數的基本工做。 Sources.

MicroJS : Microjs站點應用列出了很是多輕量的Javascript類庫和框架。它們都很是小，大部分小於5kb。

這樣你不需要因爲僅僅需要一個功能就要載入一個JS的框架。

PhoneGap :是一款開源的手機應用開發平臺，它只只用HTML和JavaScript語言就可以製做出能在多個移動設備上執行的應用。 Sources.

Sencha Touch Sencha Touch 是一個支持多種智能手機平臺（iPhone, Android, 和BlackBerry）的 HTML5 框架。

Sencha Touch可以讓你的Web App看起來像Native App。漂亮的用戶界面組件和豐富的數據管理，全部基於最新的HTML5和CSS3的 WEB標準。全面兼容Android和Apple iOS設備。

JQtouch, 是一個jQuery 的插件。主要用於手機上的Webkit 瀏覽器上實現一些包含動畫、列表導航、默認應用樣式等各類常見UI效果的JavaScript 庫。

 Sources.

DHTMLX Touch 針對移動和觸摸設備的JavaScript 框架。

DHTMLX Touch基於HTML5。建立移動web應用。

它不只僅是一組UI 小工具，而是一個完整的框架，可以針對移動和觸摸設備建立跨平臺的web應用。

它兼容主流的web瀏覽器，用DHTMLX Touch建立的應用。可以在iPad、iPhone、Android智能手機等上面執行流暢。

 

jQuery 插件

Waypoints 是一個jQuery 用來實現捕獲各類滾動事件的插件，好比實現無翻頁的內容瀏覽，或者固定某個元素不讓滾動等等。支持主流瀏覽器版本號。

Lazy loader 插件可以實現圖片的延遲載入，當網頁比較長的時候。會先僅僅載入用戶視窗內的圖片，視窗外的圖片會等到你拖動滾動欄至後面才載入。這樣有效的避免了因圖片過多而載入慢的弊端。

TweenJS : 一個簡單和強大的 tweening / animation 的Javascript庫。

Easings 類Css3的jQuery 動畫插件

Spritely 這個插件可以建立出如flash同樣的動畫效果，比方：在頁面上有一僅僅飛動的小鳥，一個動態滾動的背景等。

File Upload, jQuery 文件上傳插件4.4.1

Slideshow/Carousel 插件. Sources.

Supersized – 全屏式的背景/幻燈片插件

Masonry i一款很酷的本身主動排版插件，這款jQuery工具可以依據網格來本身主動排列水平和垂直元素，超越原來的css. Sources.

jQuery 簡單 Layout 演示，管理各類邊欄式，可改變大小式的佈局。

Flexigrid – jQuery 數據表插件

Isotope絕對是一個使人難以置信的jQuery插件，你可以用它來建立動態和智能佈局。你可以隱藏和顯示與過濾項目。又一次排序和整理甚至不少其它。

Super Gestures jQuery 插件可以實現鼠標手勢的功能。

MouseWheel 是由Brandon Aaron開發的jQuery插件。用於加入跨瀏覽器的鼠標滾輪支持。

AutoSuggest jQuery 插件可以讓你加入一些本身主動完畢的功能。

qTip 一個美麗的jQuery 的工具提示插件，這個插件功能至關強大。

jQuery Charts and graphic 用來製做圖表。

jQuery Tools– The missing UI library

 

 

HTML5 視頻播放器

 Popcorn.js 是一個HTML5 Video框架。它提供了易於使用的API來同步交互式內容，讓操做HTML5 Video元素的屬性。方法和事件變得簡單易用。 (來自Mozilla)

LeanBack Player HTML5視頻播放器,沒有依賴不論什麼JavaScript框架。

支持全屏播放，音量控制，在同一個頁面中播放多個視頻。

(來自Google)

Vid.ly 爲你上傳的視頻提供轉換功能，並且爲轉換後的視頻建立一個短網址。經過Vid.ly，讓你的視頻可以在14種不一樣的瀏覽器和設備上播放。不需要再去考慮將要瀏覽視頻的人使用什麼設備了，以免各各軟件巨頭之間的利益之爭帶來了不兼容。給用戶帶來了巨大的困擾，短網址讓你可以經過Twitter、Facebook等方式方便分享視頻。Vid.ly還可以經過html代碼嵌入到其它網頁中。Vid.ly免費賬戶空間爲1GB。免費賬戶也沒有播放或瀏覽限制。

 

JavaScript 音頻處理與可視化效果

使用HTML5 和 Flash, SoundManager V2 僅僅用單一API的提供了可靠，簡單和強大的跨平臺的音頻處理。

DSP, JavaScript的聲音Digital Signal Processing

The Radiolab Hyper Audio Player v1, 帶給你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat

jPlayer, 一個 jQuery HTML5 音頻/ 視頻庫，功能齊全的API

 

JavaScript 圖形 和 3D

 Processing.js是一個開放的編程語言。在不使用Flash或Java小程序的前提下, 可以實現程序圖像、動畫和互動的應用。其使用Web標準，無需不論什麼插件。

Javascript 3D 引擎: ThreeJS 由 Mr Doob 開發，一個輕量級的 3D 引擎，不需要了解細節，傻瓜都能使用。這個引擎可以使用<canvas>, <svg> 和 WebGL.

Shader Toy, 一款使用WebGL的在線着色器編輯器(2D/3D). 基於在線的應用架構使您無需下載不論什麼軟件就能夠開始體驗. Shader Toy包括大量有用着色器, 諸如光線追蹤, 場景距離渲染, 球體, 隧道, 變形, 後期處理特效等.

PhiloGL, Sencha的PhiloGL是首個WebGL開發工具之中的一個，提供了高水準的功能，來構建WebGL應用。Sencha建立了幾個演示，來描寫敘述框架交互式3D虛擬化的能力，比方3D view of global temperature changes。

WebGL Inspector 你就Firebug等Web調試工具同樣，這個是 WebGL的調試工具。

WebGL frameworks 由 Khronos Group 收集的一個WebGL框架列表。

EaselJS, 一個使用html5的canvas的 JavaScript 庫. Sources.

JavaScript Game Frameworks 免費的JS遊戲框架列表。

另，可參看 JS遊戲框架列表。

Raphaël是一個小型的JavaScript 庫，用來簡化在頁面上顯示向量圖的工做。

你可以用它在頁面上繪製各類圖表、並進行圖片的剪切、旋轉等操做。參看Javascript向量圖Lib–Raphaël

jQuery SVG 插件讓你可以了 SVG canvas 進行交互。

Google chart tools –  參看本站的使用Google API作統計圖

Arbor.js, 是一個利用webworkers和jQuery建立的數據圖形可視化JavaScript框架。

它爲圖形組織和屏幕刷新處理提供了一個高效、力導向佈局算法。

 

JavaScript 瀏覽器接口 (HTML5)

 Modernizr – 是一個專爲HTML5 和CSS3 開發的功能檢測類庫，可以依據瀏覽器對HTML5 和CSS3 的支持程度提供更加便捷的前端優化方案.Sources. 一個實用的列表 cross-browser Polyfills

HTML5Shiv : 該項目的目的是爲了讓IE 能識別HTML5 的元素。

Polyfills : 這個項目收集了一些代碼片斷其用Javascript支持不一樣的瀏覽器的特別功能，有些代碼需要Flash。

YepNopeJS : 一個異步的條件式的載入器。

Sources.

jQuery CSS3 Finalise : 是否厭倦了爲每一個瀏覽器的CSS3屬性加前綴？

Amplify.js :一套用於web應用數據管理和應用程序通信的 jQuery 組件庫。提供簡單易用的API接口。Amplify的目標是經過爲各類數據源提供一個統一的程序接口簡化各類格式數據的數據處理。Amplify的存儲組件使用localStorage 和 sessionStorage標準處理client的存儲信息，對一些老的瀏覽器支持可能有問題。Amplify’爲jQuery的ajax方法request添加了一些額外的特性。 Sources.

History.js 優美地支持了HTML5 History/State APIs

Socket.IO Web的socket編程。

 

JavaScript 工具

 {{mustaches}} 小型的 JavaScript 模板引擎。

json:select(), CSS式的JSON選擇器

HeadJS, 異步JavaScript裝載。其最大特色就是不只可以按順序運行還可以併發裝載載js。

JsDoc Toolkit是一款輔助工具，你僅僅需要依據約定在JavaScript 代碼中加入對應的凝視，它就可以依據這些凝視來本身主動生成API文檔。Responsive image, 一個試驗性的項目，用來處理responsive layouts 式的圖片。

UglifyJS是基於NodeJS的Javascript語法解析/壓縮/格式化工具，它支持不論什麼CommonJS模塊系統的Javascript平臺。

Dhteumeuleu, 交互式的 DOM 腳本和DHTML 的開源演示。

Backbone是一個前端 JS 代碼 MVC 框架，被著名的 37signals 用來構建他們的移動client。

它不可代替 Jquery。不可代替現有的Template 庫。

而是和這些結合起來構建複雜的 web 前端交互應用。

假設項目涉及大量的 javascript 代碼，實現很是多複雜的前端交互功能，首先你會想到把數據和展現分離。

使用 Jquery 的 selector 和 callback 可以輕鬆作到這點。

但是對於富client的WEB應用大量代碼的結構化組織很是必要。Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包含 models, collections, views 和 events, controller 。

 

client和模擬器

BrowserShot, 檢查瀏覽器的兼容性，跨瀏覽器平器的測試

Test everything… 輸入一個你想要測試的URL……

Android browser 模擬器

iPhone browser 模擬器

Opera browser 模擬器

Firebug 與 Firefox 集成，可以查看和調試你的Web頁面。

 

CSS3 和 字庫

 CSS3 Maker CCS3的生成器easy地建立 

CSS3 animations。 Sencha Animator 是一個桌面應用可以爲WebKit瀏覽器和觸摸式移動設備建立 CSS3 animations 。

CSSwarp – CSS 文本扭曲生成器

Gradient Editor, 一個強大的Photoshop式的CSS 漸變編譯器。來自 ColorZilla

Google Web Fonts 經過Google Web Fonts API 可以瀏覽所有的字體@font-face Kit Generator, 爲Web轉換字體

Typetester, 比較字體。

Media Queries. 一組 responsive web 設計。

Pattern TAP, UI組件。

 

Website (FULL) 模板

 HTML5 Boilerplate 是一個HTML5 / CSS / js模板，是實現跨瀏覽器正常化、性能優化。穩定的可選功能如跨域Ajax和Flash的最佳實踐。

項目的開發商稱之爲技巧集合，目的是知足您開發一個跨瀏覽器。並且面向將來的站點的需求。

 Sources.

HTML5 starter pack 是一個乾淨的和有組織的文件夾結構。其可適合很是多項目，另外一些非常常常使用的文件，以及簡單的Photoshop設計模板。

Initializr 是一個HTML5 模板生成器，其可以幫你在15秒內建立一個HTML5的項目。

Animated Portfolio Gallery （教程）Slick MobileApp Website 假設經過 jQuery 和 CSS 製做一個手機應用的站點。

RSS Reader 假設經過 jQuery Mobile 建立一個RSS Reader

Single Page Applications 使用jQuery的朋友們 (Backbone, Underscore, …)建立單一頁面。