40個實用的輕量級JavaScript庫)

文章目錄

• 1. 表單
• 2. 動畫
• 3. 視覺化和映像特效
• 4. 資料庫
• 5. 字串和數學函數
• 6. 字型
• 7. 調試與記錄
• 8. 其他

流行的JavaScript庫，如jQuery, MooTools, Prototype, Dojo和YUI等，完成起常見的JavaScript任務來得心應手。這些JS庫為用戶端動作(events)、動畫特效(effects)，和AJAX應用等提供很多現成的函數。而且如果這些庫中的某一個無法直接達到你要的效果，還可能會有相關外掛程式滿足你的要求。

JavaScript庫的靈活性給我們的工作提供方便，但有利也有弊——比如說JavaScript檔案過大的問題。儘管放棄這些著名的JavaScript庫能顯示你的聰明才智，但你可能還是會願意採用一些體積小巧、專註於特定任務的JavaScript庫。

以下是40個協助你達到特定目的的獨立JavaScript庫。 網上能用的當然不只這些，但每位網頁設計師和程式員應該都能在這裡有所收穫。

1. 表單

wForms
wForms 是一個開源的、 無入侵的(unobstrusive)注*程式碼程式庫，能夠簡化大部分與表單相關的常用JavaScript函數。 它能對錶單的使用者輸入值進行驗證，只需為表單元素添加一個特定的類即可使用。另外，wForms 還具有強大的表單同步（例如“全選/全不選”）和條件表單（如，當x被選擇則顯示y）功能。

注* 這個詞也被譯為“不唐突”，“有的放矢”等。意即JavaScript代碼和HTML代碼分離，同時也對不同版本瀏覽器選擇性地做出反應，以提高使用者體驗。更多解釋，請參照“為之漫筆”。譯者認為“無入侵”貼合英文原文，作為術語更加簡潔易懂，應該成為這個詞的通用譯法。

Validanguage
Validanguage 是一個無入侵的 JavaScript表單驗證架構。 它有一個繼承邏輯，可以全域定義，也可以對每個表單或每個元素分別定義。 利用作者提供的兩個API，以及諸如綜合的AJAX支援(integrated AJAX support)、緩衝和調用函數等特性，該架構可以提供強健的(robust)驗證體驗。兩個API用以進階設定，分別是加在注釋裡的像HTML語言的 API和基於JavaScript對象的API。

LiveValidation
LiveValidation是一個輕量級的JavaScript庫，提供一系列驗證函式。除了經典驗證法，此庫還具有即時驗證(live validation)特性，能根據你鍵入的文字即時控制特定地區。 Ruby on Rails的開發人員會發現LiveValidation異常好用，因為二者的命名規範和參數設定非常相似。雖然它是獨立庫，不過也有一個Prototype版注*。

注* 也就是依賴於Prototype庫，但是本身代碼更簡潔的版本

yav
一個功能強大、可擴充、使用靈活的表單驗證程式碼程式庫。yav可處理多種情況，從日期、email、整數之類的基本驗證到掩碼文字框和自訂Regex之類的進階應用程式，都得心應手。該庫內建AJAX支援，並且可以輕易在每個對象層自訂錯誤顯示資訊。

qForms
處理表單的完全解決方案。為開發人員提供諸如多樣驗證規則，阻止多次提交，鎖定/禁用域等特性。

formreform
不用表格來實現多欄布局通常都很有挑戰性。這個小巧的程式碼程式庫能夠把一個簡單表單轉換成一欄、兩欄或四欄格式化布局的表單。利用formreform能自動讓表單樣式適應任何設計。

2. 動畫

$fx()
$fx() 是一個使用者為HTML元素添加動畫效果的輕量級程式碼程式庫。利用此庫，你可以指定在一定時間內改變任何CSS屬性。對於複雜動畫，你可以合并效果，給各效果分組，讓它們鏈式反應或者同時發生。你還可以為每一步動畫設定不同的回調動作，進行更深入的自訂。

JSTweener
補間動畫的JavaScript庫。它的API和著名的ActionScript補間動畫引擎 Tweener 相似。你可以調用動畫時間，定義形狀變換方式和延遲。在幾乎任何時間點（如onStart - 開始時, onComplete -完成時, onUpdate - 更新時），你都可以引發新動作。

Facebook Animation
用於建立基於CSS的自訂動畫的強大程式碼程式庫。利用一兩行Facebook Animation，你就能改善使用者介面。本程式碼程式庫的文法遵循FBJS（在Facebook工具 + 生產力中使用的程式碼程式庫），一旦學會，你也就具備了建立Facebook工具 + 生產力的能力！

FX
一個輕量級程式碼程式庫，擁有和YUI類似的使用句法。FX可以為幾乎所有CSS屬性建立補間動畫。支援顏色和滾動動畫。你只需要設計任意對象，任意屬性的起始值和結束值就夠了。

3. 視覺化和映像特效

JS charts
JS charts 可以輸出柱狀圖，餅圖和曲線圖。只需從一個XML檔案或JavaScript數組裡調用資料，它就能提供極佳的易用性。圖表被輸出為png影像檔。該庫支援大部分流行的瀏覽器。

Canvas 3D JS Library (C3DL)
C3DL讓編寫3D應用更加容易。它提供一組演算法、情境和3D對象類，對於想在瀏覽器裡開發3D內容，但是對3D映像的深層演算法不甚了了的程式員真是不小的福音。

Processing.js
這個JavaScript庫指向 Processing 語言 （一個用於映像、動畫和互動編程的語言）。它有豐富的特性用於建立2D輸出，提供形狀/映像繪製方法、顏色處理、字型、對象、演算法函數等等。

Rapha?l
一個極贊的程式碼程式庫，簡化在網頁中使用向量圖形的工作。Rapha?l 利用SVG和VML來建立映像，並能為這些映像綁定動作處理器。該庫功能強大，包括旋轉、動畫、縮放和繪製曲線、矩形、圓形等。

ImageFX
可以為映像添加特效，例如模糊、銳利化、浮雕、變亮等等。ImageFX使用畫布元素來建立效果。相容所有主流瀏覽器（你可以在其頁面看到相容性列表）。此庫簡單易用，只需要在網頁中插入.js檔案然後用一行代碼調用就夠了。

Pixastic
Pixastic 使用HTML5的畫布對象，此對象可以直接處理像素級資料。支援的效果包括減淡和去色、反相、翻轉、亮度和對比調節、色相和飽和度、浮雕、模糊等等等等。由於畫布對象相對較新，各個瀏覽器對這一JavaScript庫的支援程度不盡相同。

Reflection.js
自動建立倒影效果的無侵入JavaScript庫。倒影的高度和透明度可以自訂。使用該庫就像給映像添加一個“類”一樣簡單。在所有主流瀏覽器中都能正常工作，檔案大小不過5 KB。

4. 資料庫

Taffy DB
可以作為瀏覽器中的SQL資料庫來使用的JavaScript，也可以看做是一個進階的“數組管理器”。在AJAX化的Web應用中，它可以工作在資料庫層。你可以建立、讀取、編輯和刪除資料，也可以使用迴圈、歸類以及各種進階查詢方式。

ActiveRecord.js
此庫支援Google Gears和Chrome，Aptana Jaxer，Adobe AIR ，以及任何支援W3C HTML5 SQL規範的平台（現在Webkit和iPhone也支援了）。它使在JavaScript利用資料庫變得簡單。使用ActiveRecord.js, 你能自動建立資料表、驗證和同步資料等等。

5. 字串和數學函數

Date.js
和日期打交道總是很容易把人搞昏掉。如此多的點、斜杠和格式。Datejs以令人耳目一新的方式提供或簡單或複雜的日期函數。它可以處理如下格式的日期：“Next thursday”(下星期四), “+2 years”(兩年後) 以及諸如2009.01.08, 12/6/2001的所有格式。

譯註：此函數很有用啊，哪位朋友來把它漢化成可以支援中文就好了。

Sylvester
此JavaScript庫可以輕鬆處理向量和矩陣。有了它你就不用被一串串迴圈和大量數組攪得頭昏腦脹了。此庫包含模數化向量和任意維度矩陣的類，從而可以計算無限直線的模數和3D空間裡的平面。

譯註：太進階了，直冒冷汗``` -_-||

Pretty Date
一個聰明的JavaScript解決方案，讓過去一個月內的日期以更加漂亮和方便使用的方式顯示。它能讓日期以距離現在多久的方式顯示，如“3天以前”，“昨天”。

XRegExp
Regex可以在JavaScript裡通過RegExp對象加以利用。 XRegExp 能使Regex變得更加強大，它提供一些在將來的瀏覽器才會實現的特性（據 ECMAScript 4 - ES4 的開發願景）。使用該庫，RegExp對象可以被緩衝和再利用，還能為已經存在的RegExp對象添加修改器等等。

JavaScript URL Library
一個用與方便處理URLs的JavaScript庫。如果需要，它可以控制到將URL內每一個部分當做字串來處理。這一URL程式碼程式庫剛出爐不久，但已能像剛才所提一樣工作。

6. 字型

typeface.js
一個用以在網頁上使用任意字型的程式碼程式庫。與流行的解決方案（如sIFR 和 FLIR）不同，typeface.js 並不需要Flash，是100%的JavaScript應用。要使用任意字型，只需上傳其字型檔到一個 基於網頁的字型產生器，然後下載渲染過的JavaScript檔案，把它添加到你的網頁中即可。

Cufón
與typeface.js十分相似， Cufón 也是一個讓你在網頁中使用TrueType字型的程式碼程式庫。同樣，它也使用一個產生器來將字型檔轉換成VML映像。只需在網頁中插入generated .js檔案，你即可像使用普通字型一樣使用你指定的字型。

譯註：這兩個工具對於中文網頁不太實用…… (⊙_⊙)

7. 調試與記錄

Blackbird
在JavaScript開發過程中，經常會用到alert()函數來添加斷點。Blackbird 提供一個風格化的控制台，用以記錄、查看和過濾JavaScript中的訊息，如此即可消除在每個alert()的停頓，並且更好地分析它們，從而加快開發進程。

NitobiBug
基於瀏覽器的，跨瀏覽器 JavaScript 對象記錄和檢測組件。通過在你的代碼中插入規則（和JavaScript對象的用法類似），你可以輕易區別簡單類型，如字串、布爾值和數值，以及複雜元素，如錯誤資訊和JavaScript對象。

Firebug Lite
Firebug，大概是世界上最好的JavaScript調試工具，可惜只能在Firefox中使用。要在所有瀏覽器中擁有一個類似工具，向你的網頁添加這個Firebug Lite .js檔案吧，面對你的是你所熟悉的功能和介面。

8. 其他

swfobject
swfobject 是最流行的，擴充性最好的插入Flash影片的方式。此庫符合Web標準，產生可以通過驗證的標記，能夠自動檢測使用者的Flash播放器版本，如果版本不匹配，它還允許你向使用者顯示代替內容。你可以看一看“為什麼應該使用swfobject”這篇文章，寫得不錯。

sorttable and dragtable
不管你喜不喜歡，表格仍然是展示資料的最佳方式。不過表格還可以更好用： sorttable 讓表格式資料可以排序，升序降序均可。你指向為添加class=”sortable” 屬性。你還可以排除某些特定的欄，讓他們不自動排序，以及指定升序或者降序哪一個為預設值。dragtable 使表格的行列變得可拖動。在網頁中插入此庫後，同樣，給表格添加一個class=”dragtable”即可。如果需要兩個功能都用，只需在網頁中包含同時兩個庫，然後添加class=”sortable dragtable” 。

DD_roundies and DD_belatedPNG
DD_roundies 是一個極佳的不利用圖片建立圓角的JavaScript解決方案。它處理的重點在IE，通過使用VML來解決問題。其他瀏覽器被忽略，因為他們支援CSS的 border-radius 屬性。(譯註：Really?)

DD_belatedPNG為臭名昭著的IE6 PNG問題提供了一個可自訂的解決辦法。不論PNG映像是用於“src”或是“background-image”中， DD_belatedPNG 都能把它解決掉。與其他解決方案不同， “background-position” 和 “background-repeat” 屬性也能正常工作！

譯註：這個太實用啦！O(∩_∩)O 哈哈~

Custom JavaScript Dialog Boxes
用於建立自訂對話方塊的輕量級（約 4.5 KB）程式碼程式庫。四種對話方塊可用： alerts(出錯), warnings(警告), prompts(提示), success(成功)。利用一個簡單的函數，你可以自訂對話方塊的標題，內容和顯示時間。

GameJS
GameJS 是一個JavaScript版本的 Microsoft’s XNA 遊戲架構， 使用 “畫布” 作為渲染機制。JavaScript不是編寫遊戲的最佳平台。不過如果是那些幀速要求較低的遊戲，而你又是一個JavaScript開發人員，何樂而不為？ 此庫包含一些控制遊戲元素、螢幕顯示和鍵盤操作的方便好用的類。

Shortcuts.js
自從Google Reader和Gmail之後，Web應用裡的鍵盤快速鍵變得越來越流行，因為他們大大提升了易用性。Shorcuts.js提供更為方便地處理鍵盤快速鍵的函數。 使用該庫，建立快速鍵，然後在按下鍵盤的同時就運行函數成為更易實現的可能。

Mapstraction
幾個不同的地圖供應商都提供了各自不同的API。如果你想在供應商之間轉換（比如說從Google Map轉到MapQuest），則需要重寫一些代碼。Mapstraction就是用來幫你解決這個問題的。它提供一個通用 API ，幫你在大多數流行的地圖供應商之間轉換。只需更新一行代碼，即可轉換完畢。

Amberjack
一個小巧的JavaScript庫，為你的網站添加上漂亮的導遊資訊。 一旦啟用，一個模式化的內容框就能像到導遊一樣介紹您的網站，框內可以添加任意你想要的內容。導遊內容的代碼可以手工編寫，也可以用線上工具自動產生。當然，你可以通過編寫css或者利用即刻可用的主題來使導遊資訊符合內容框的樣式。