1. 程式人生 > >40 個輕量級 JavaScript 庫

40 個輕量級 JavaScript 庫

流行的 JavaScript 庫不勝列舉,jQuery, MooTools, Prototype, Dojo, YUI。這些 JavaScript 庫功能豐富,加上它們的外掛,幾乎能勝任任何工作,然而這是有代價的,這些庫往往導致你的網頁尺寸臃腫。在某些場合,如果你只想完成特定的工作,可以使用一些功能更專一的輕量庫,本文介紹了40個非常出色的輕量級 JavaScript 庫。

1. 表單相關

wForms
一個低調的開源專案,簡化了絕大多數常用 JavaScript 表單功能,包含可以直接使用的表單驗證功能,另外,還包含強大的表單同步以及表單條件判斷功能。

wForms

Validanguage
又一個低調的 JavaScript 表單驗證框架。它擁有整合邏輯,一些設定可以針對全域性,單個表單或單個物件。提供兩個API,整合 AJAX 支援,快取,以及回撥函式。它提供類似 HTML 的 API 語句,以及面向物件的 JavaScript API 。

Validanguage

LiveValidation
一個輕量的表單驗證庫。除了傳統的驗證功能,還提供實時驗證,可以一邊輸入一遍驗證。Ruby on Rails 使用者可能會發現這個庫非常好用,因為他們的命名規則和引數十分近似。該庫既有獨立版本,又有一個 Prototype 版本。

LiveValidation

yav
一個強大,靈活,可擴充套件的表單驗證庫。支援各種場合,從簡單的如日期,電子郵件地址以及整數的驗證,到複雜的,如正則表示式。內建 AJAX 支援,輸出的錯誤訊息可以定位到物件級。

qForms
處理表單的整套方案。功能包括各種驗證規則,防止多次釋出的機制,以及鎖定或解鎖制定輸入框。

formreform
不基於 table 的多欄設計向來是一個挑戰。這個微型庫將傳統的表單變成漂亮的多欄形式。

formreform

2. 動畫相關

$fx()
一個用來讓 HTML 物件運動的輕量庫。你可以在一個時間軸上改變任何 CSS 屬性,對於複雜動畫,你可以將各種效果結合起來,將物件分組,讓它們並行運動。

$fx() JavaScript Animation Library

JSTweener
一個生成中間幀的 JavaScript 庫,它的 API 類似著名的中間幀引擎 Tweener。你可以指定動畫時間,定義切換效果以及時延。在幾乎任何點都可以觸動事件。

JSTweener

Facebook Animation
一個強大的,用來建立可定製的,基於 CSS 的動畫。在 Facebook 動畫中,幾行程式碼就可以改善 UI。語法和 FBJS (用於 Facebook 的庫)一樣。

FX
一個語法類似 YUI 的輕量 JavaScript 庫,可以為幾乎任何 CSS 屬性建立中間幀。支援顏色和滾動動畫,為物件設定 to 和 from 值就可以了。

3. 視覺與圖形效果

JS charts
支援柱狀圖,圓餅圖以及簡單的曲線圖。直接將這個庫插入網頁,然後從 XML 檔案或 JavaScript 陣列變數呼叫資料。PNG 格式,相容所有主要瀏覽器。

JS Charts

Canvas 3D JS Library (C3DL)
C3DL 使 3D 程式的編寫變得簡單。提供一套數學,場景與 3D 物件類,可以直接在瀏覽器中開發 3D 內容,不需要很深的 3D 知識。

C3DL

Processing.js
這是 Processing 語言在 JavaScript 的移植。2D輸出功能豐富。提供了繪圖,色彩處理,字型,物件等處理函式。

Processing.js

Rapha?l
一個讓人驚歎的 JavaScript 庫,可以在 Web 上實現向量圖。使用 SVG, VML 建立的圖形可以被更改或繫結事件。功能極其豐富,包括旋轉,動畫,縮放等。

Raphael: Vectors With JavaScript

ImageFX
該 JavaScript 庫為圖片新增效果,如虛化,銳化,浮雕,加亮等。ImageFX 使用畫布物件實現這些效果,相容所有主流瀏覽器。這個庫非常容易使用,只要將 .js 庫檔案插入網頁,呼叫那些函式即可。

Imagefx

Pixastic
Pixastic 使用 HTML5 畫布物件,允許對原始畫素進行操作。效果包括去飽和度,灰度級,反轉,亮度,對比度調整,色調,飽和度調整,以及浮雕,虛化等效果。因為用到了 HTML 5 的畫布物件,因此還無法相容所有瀏覽器。

Reflection.js
一個很低調的 JavaScript 自動實現倒影效果。倒影的高度,透明度可以調整。支援所有主流瀏覽器,檔案尺寸小於5K。

Reflection.js

4. 資料庫

Taffy DB
一個 JavaScript 庫,可以看作瀏覽器中的 SQL Server,或高階陣列管理器。在使用了 AJAX 的程式中,可以用作資料庫層,可以建立,讀取,編輯,刪除資料,使用迴圈,排序以及高階查詢。

ActiveRecord.js
這個庫支援 Google Gears 以及 Chrome,Aptana Jaxer, Adobe AIR 以及任何支援 HTML 5 SQL 細則的平臺(目前有 Webkit 以及 iPhone)。可以自動建立表,驗證和同步資料。

ActiveRecord.js

流行的 JavaScript 庫不勝列舉,jQuery, MooTools, Prototype, Dojo, YUI。這些 JavaScript 庫功能豐富,加上它們的外掛,幾乎能勝任任何工作,然而這是有代價的,這些庫往往導致你的網頁尺寸臃腫。在某些場合,如果你只想完成特定的工作,可以使用一些功能更專一的輕量庫,本文介紹了40個非常出色的輕量級 JavaScript 庫。

5. 字串與數學函式

Date.js
和日期打交道不是件容易事,有很多格式要處理。Datejs 可以很好地處理簡單或複雜的日期函式。可以將日期解析出諸如“Next thursday”,“+2 years”一類的格式,也支援所有日期形式,如 2009.01.08, 12/6/2001。

Datejs

Sylvester
一個處理向量和點陣的數學 JavaScript 庫,包含多維向量和點陣建模類,以及在3D空間的一些模型。

Sylvester

Pretty Date
一個很出色的 JavaScript 庫,用一種很漂亮,很友好的方式顯示日期,如下圖所示。

Pretty Date

XRegExp
JavaScript 中的 RegExp 物件已經支援正則表示式,XRegExp 增加了更多未來瀏覽器可能包含的功能(ECMAScript 4 - ES4)。該庫對 RegExp 物件進行快取,重用並增加了眾多新功能。

JavaScript URL Library
一個用來處理 URL 的 JavaScript 庫,可以對 URL 中的任意部分進行處理。

6. Fonts

typeface.js
這個庫可以讓你在網頁中使用任意字型,但和 sIFR 以及 FLIR 這些基於 Flash 的方案不一樣,typeface.js 100% 基於 JavaScript,只需將你的字型檔案上傳到一個基於 Web 的生成器那裡,再將生成的 JavaScript 檔案下載回來包含到網頁中即可。

Typeface.js

Cufón
和 typeface.js 很相像,Cufón 也可以讓你在網頁中使用任意字型,同樣,它也是使用一個生成器,將字型轉換成 VML,將生成的 .js 檔案包含到網頁即可。

7. 除錯與記錄

Blackbird
人們經常使用 Alert() 除錯 JavaScript 程式,Blackbird 提供了一個漂亮的控制檯記錄,檢視,過濾程式的執行。

Blackbird

NitobiBug
基於瀏覽器的跨瀏覽器 javaScript 物件記錄與檢查工具。

NitobiBug

Firebug Lite
目前最好的 JavaScript 除錯工具非 Firebug 莫屬,然而該工具只支援 FireFox,將 Firebug Lite .js 檔案插入你的網頁,就可以在所有瀏覽器都實現 FireBug 功能。

Firebug Lite

8. 其它

swfobject
這是一個最受歡迎的對 Flash 物件進行引用的方法。可以生成標準 swf 引用程式碼,並探測使用者播放器版本。如果使用者版本不支援,會顯示備用內容。

swfobject

sorttabledragtable
不管你喜歡與否,table 仍然是最好的表現資料的方式,但可以更好地利用。sorttable 可以讓表格資料排序,只需在 table 上加一個 class="sortable" 標誌,還可以排除指定的欄。dragtable 讓表格的欄可以拖動,在表格上加上 class="dragable" 標誌即可,這兩個類可以結合起來使用,只需加上 class="sortable dragtable" 即可。

DD_roundiesDD_belatedPNG
DD_roundies 可以不依賴圖片實現圓角功能,只面向 IE, 通過 VML 實現,其它瀏覽器會被略過,因為那些瀏覽器本身支援 CSS 圓角。

JavaScript Rounded Corners

DD_belatedPNG 是為了解決 IE6 對 PNG 支援不好問題而開發的,不管 PNG 圖片用於 src 還是 background-image,DD_belatedPNG 都能提供修補。

Custom JavaScript Dialog Boxes
一個只有 4.5K 的輕量 JavaScript 庫,可以建立使用者定製對話方塊,可顯示4種類型的訊息框,alerts, warnings, prompts, success。可以設定訊息框標題,內容,以及過多長時間顯示。

Custom Dialog Boxes

GameJS
GameJS 是微軟的 XNA 遊戲框架在 JavaScript 上的移植,使用 canvas 物件作為輸出裝置。JavaScript 不是最佳遊戲平臺,但對那些幀率較低的遊戲也沒有問題。

GameJS

Shortcuts.js
從 Google Reader 和 Gmail 開始,Web 程式中的快捷鍵開始流行起來。Shorcuts.js 讓快捷鍵的處理變得簡單。

Mapstraction
有不少地圖提供商都提供不同 API,如果你要更換提供商,比如從 Google Maps 到 MapQuest,需要更新程式碼,Mapstraction 提供了常用地圖提供商的 API,只需該一行程式碼就能完成轉換。

Mapstraction

Amberjack
一個只有 4K 的微型 JavaScript 庫,可以為你的網站新增漂亮的教程功能,一個模式視窗會以教程的形式顯示任意內容,教程中的步驟可以通過手工編碼實現或線上自動生成。可以使用主題或 CSS 控制內容的格式。

Amberjack

JsLoad
JsLoad 可以從 Google server 遠端載入各種 JavaScript 庫,可以自動載入各種版本的支撐庫。