受歡迎的JavaScript 函式庫不勝枚舉,jQuery, MooTools, Prototype, Dojo, YUI。這些JavaScript 庫功能豐富,加上它們的插件,幾乎能勝任任何工作,然而這是有代價的,這些庫往往導致你的網頁尺寸臃腫。在某些場合,如果你只想完成特定的工作,可以使用一些更專一的輕量級函式庫,本文介紹了40個非常出色的輕量級JavaScript 函式庫。
1. 表單相關
一個低調的開源項目,簡化了絕大多數常用JavaScript 表單功能,包含可以直接使用的表單驗證功能,另外,還包含強大的表單同步以及表單條件判斷功能。
又是一個低調的JavaScript 表單驗證框架。它擁有整合邏輯,一些設定可以針對全局,單一表單或單一物件。提供兩個API,整合AJAX 支持,緩存,以及回呼函數。它提供類似HTML 的API 語句,以及物件導向的JavaScript API 。
LiveValidation( http://www.livevalidation.com )
一個輕量級的表單驗證庫。除了傳統的驗證功能,還提供即時驗證,可以一邊輸入一次驗證。 Ruby on Rails 使用者可能會發現這個函式庫非常好用,因為他們的命名規則和參數十分近似。該庫既有獨立版本,又有一個Prototype 版本。
yav( http://yav.sourceforge.net/en/index.html )
一個強大,靈活,可擴展的表單驗證庫。支援各種場合,從簡單的如日期,電子郵件地址以及整數的驗證,到複雜的,如正規表示式。內建AJAX 支持,輸出的錯誤訊息可以定位到物件層級。
qForms( http://www.pengoworks.com/index.cfm?action=get:qforms )
處理表單的整套方案。功能包括各種驗證規則,防止多次發布的機制,以及鎖定或解鎖制定輸入框。
formreform( http://code.google.com/p/formreform/ )
不基於table 的多欄設計向來是一個挑戰。這個微型庫將傳統的表單變成漂亮的多欄形式。
2. 動畫相關
$fx( http://fx.inetcat.com/ )
用來讓HTML 物件運動的輕量庫。你可以在一個時間軸上改變任何CSS 屬性,對於複雜動畫,你可以將各種效果結合起來,將物件分組,讓它們並行運動。
JSTweener( http://coderepos.org/share/wiki/JSTweener )
一個產生中間幀的JavaScript 函式庫,它的API 類似著名的中間幀引擎Tweener。你可以指定動畫時間,定義切換效果以及延遲。在幾乎任何點都可以觸動事件。
Facebook Animation( http://developers.facebook.com/animation/ )
一個強大的,用來創建可自訂的,基於CSS 的動畫。在Facebook 動畫中,幾行程式碼就可以改善UI。文法和FBJS (用於Facebook 的函式庫)一樣。
FX( http://ryanmorr.com/archives/fx-lightweight-and-standalone )
一個語法類似YUI 的輕量JavaScript 函式庫,幾乎可以為任何CSS 屬性建立中間影格。支援顏色和滾動動畫,為物件設定to 和from 值就可以了。
3. 視覺與圖形效果
JS charts( http://www.jscharts.com/ )
支持長條圖,圓餅圖以及簡單的曲線圖。直接將這個函式庫插入網頁,然後從XML 檔案或JavaScript 陣列變數呼叫資料。 PNG 格式,相容於所有主要瀏覽器。
Canvas 3D JS Library (C3DL)( http://www.c3dl.org/ )
C3DL 讓3D 程式的編寫變得簡單。提供一套數學,場景與3D 物件類,可以直接在瀏覽器中開發3D 內容,不需要很深的3D 知識。
Processing.js( http://ejohn.org/blog/processingjs/ )
這是Processing 語言在JavaScript 的移植。 2D輸出功能豐富。提供了繪圖,色彩處理,字體,物件等處理函數。
Rapha? l( http://raphaeljs.com/ )
一個令人驚嘆的JavaScript 函式庫,可以在Web 上實作向量圖。使用SVG, VML 建立的圖形可以被變更或綁定事件。功能極為豐富,包括旋轉,動畫,縮放等。
ImageFX( http://www.nihilogic.dk/labs/imagefx/ )
此JavaScript 庫為圖片添加效果,如虛化,銳化,浮雕,加亮等。 ImageFX 使用畫布物件實現這些效果,相容於所有主流瀏覽器。這個函式庫非常容易使用,只要將.js 函式庫檔案插入網頁,呼叫那些函數即可。
Pixastic( http://www.pixastic.com/ )
Pixastic 使用HTML5 畫布對象,允許對原始像素進行操作。效果包括去飽和度,灰階,反轉,亮度,對比調整,色調,飽和度調整,以及浮雕,虛化等效果。因為用到了HTML 5 的畫布對象,所以還無法相容於所有瀏覽器。
Reflection.js( http://cow.neondragon.net/stuff/reflection/ )
一個很低調的JavaScript 會自動實現倒影效果。倒影的高度,透明度可以調整。支援所有主流瀏覽器,檔案尺寸小於5K。
4. 資料庫
Taffy DB( http://taffydb.com/ )
一個JavaScript 函式庫,可以看作瀏覽器中的SQL Server,或是高階數組管理器。在使用了AJAX 的程式中,可以用作資料庫層,可以創建,讀取,編輯,刪除數據,使用循環,排序以及高級查詢。
ActiveRecord.js( http://www.activerecordjs.org/ )
這個函式庫支援Google Gears 以及Chrome,Aptana Jaxer, Adobe AIR 以及任何支援HTML 5 SQL 細則的平台(目前有Webkit 以及iPhone)。可以自動建立表,驗證和同步資料。