40个实用的轻量级JavaScript库

 

流行的JavaScript库,如jQuery, MooTools, Prototype, DojoYUI等,完成起常见的JavaScript任务来得心应手。这些JS库为客户端动作(events)、动画特效(effects),和AJAX应用等提供很多现成的函数。而且如果这些库中的某一个无法直接达到你要的效果,还可能会有相关插件满足你的要求。

JavaScript库的灵活性给我们的工作提供方便,但有利也有弊——比如说JavaScript文件过大的问题。尽管放弃这些著名的JavaScript库能显示你的聪明才智,但你可能还是会愿意采用一些体积小巧、专注于特定任务的JavaScript库。

以下是40个帮助你达到特定目的的独立JavaScript库。 网上能用的当然不只这些,但每位网页设计师和程序员应该都能在这里有所收获。

1. 表单

wForms
wForms 是一个开源的 无入侵的(unobstrusive)注*代码库,能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证,只需为表单元素添加一个特定的类即可使用。另外,wForms 还具有强大的表单同步(例如“全选/全不选”)和条件表单(如,当x被选择则显示y)功能。

注* 这个词也被译为“不唐突”,“有的放矢”等。意即JavaScript代码和HTML代码分离,同时也对不同版本浏览器选择性地做出反应,以提高用户体验。更多解释,请参照“为之漫笔”。译者认为“无入侵”贴合英文原文,作为术语更加简洁易懂,应该成为这个词的通用译法。

wForms

Validanguage
Validanguage 是一个无入侵的 JavaScript表单验证框架。它有一个继承逻辑,可以全局定义,也可以对每个表单或每个元素分别定义。利用作者提供的两个API,以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性,该框架可以提供强健的(robust)验证体验。两个API用以高级设置,分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。

Validanguage

LiveValidation
LiveValidation是一个轻量级的JavaScript库,提供一系列验证函数。除了经典验证法,此库还具有实时验证(live validation)特性,能根据你键入的文字实时控制特定区域Ruby on Rails的开发者会发现LiveValidation异常好用,因为二者的命名规范和参数设置非常相似。虽然它是独立库,不过也有一个Prototype版注*

注* 也就是依赖于Prototype库,但是本身代码更简洁的版本

LiveValidation

yav
一个功能强大、可扩展、使用灵活的表单验证代码库yav可处理多种情况,从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用,都得心应手。该库内建AJAX支持,并且可以轻易在每个对象层自定义错误显示信息。

qForms
处理表单的完全解决方案。为开发者提供诸如多样验证规则,阻止多次提交,锁定/禁用域等特性。

formreform
不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。

formreform

2. 动画

$fx()
$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库,你可以指定在一定时间内改变任何CSS属性。对于复杂动画,你可以合并效果,给各效果分组,让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作,进行更深入的自定义。

$fx() JavaScript Animation Library

JSTweener
补间动画的JavaScript库。它的API和著名的ActionScript补间动画引擎 Tweener 相似。你可以调用动画时间,定义形状变换方式和延迟。在几乎任何时间点(如onStart – 开始时, onComplete -完成时, onUpdate – 更新时),你都可以引发新动作。

JSTweener

Facebook Animation
用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation,你就能改善用户界面。本代码库的语法遵循FBJS(在Facebook实用工具中使用的代码库),一旦学会,你也就具备了创建Facebook实用工具的能力!

FX
一个轻量级代码库,拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象,任意属性的起始值和结束值就够了。

3. 视觉化和图像特效

JS charts
JS charts 可以输出柱状图,饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据,它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。

JS Charts

Canvas 3D JS Library (C3DL)
C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类,对于想在浏览器里开发3D内容,但是对3D图像的深层算法不甚了了的程序员真是不小的福音。

C3DL

Processing.js
这个JavaScript库指向 Processing 语言 (一个用于图像、动画和交互编程的语言)。它有丰富的特性用于创建2D输出,提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。

Processing.js

Rapha?l
一个极赞的代码库,简化在网页中使用矢量图形的工作。Rapha?l 利用SVGVML来创建图像,并能为这些图像绑定动作处理器。该库功能强大,包括旋转、动画、缩放和绘制曲线、矩形、圆形等。

Raphael: Vectors With JavaScript

ImageFX
可以为图像添加特效,例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器(你可以在其页面看到兼容性列表)。此库简单易用,只需要在网页中插入.js文件然后用一行代码调用就够了。

Imagefx

Pixastic
Pixastic 使用HTML5的画布对象,此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新,各个浏览器对这一JavaScript库的支持程度不尽相同。

Reflection.js
自动创建倒影效果的无侵入JavaScript库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作,文件大小不过5 KB。

Reflection.js

4. 数据库

Taffy DB
可以作为浏览器中的SQL数据库来使用的JavaScript,也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中,它可以工作在数据库层。你可以创建、读取、编辑和删除数据,也可以使用循环、归类以及各种高级查询方式。

ActiveRecord.js
此库支持Google Gears和Chrome,Aptana Jaxer,Adobe AIR ,以及任何支持W3C HTML5 SQL规范的平台(现在Webkit和iPhone也支持了)。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。

ActiveRecord.js

5. 字符串和数学函数

Date.js
和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期:“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。

译注:此函数很有用啊,哪位朋友来把它汉化成可以支持中文就好了。

Datejs

Sylvester
此JavaScript库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类,从而可以计算无限直线的模数和3D空间里的平面。

译注:太高级了,直冒冷汗“` -_-||

Sylvester

Pretty Date
一个聪明的JavaScript解决方案,让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示,如“3天以前”,“昨天”。

Pretty Date

XRegExp
正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大,它提供一些在将来的浏览器才会实现的特性(据 ECMAScript 4 – ES4 的开发愿景)。使用该库,RegExp对象可以被缓存和再利用,还能为已经存在的RegExp对象添加修改器等等。

JavaScript URL Library
一个用与方便处理URLs的JavaScript库。如果需要,它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久,但已能像刚才所提一样工作。

6. 字体

typeface.js
一个用以在网页上使用任意字体的代码库。与流行的解决方案(如sIFRFLIR)不同,typeface.js 并不需要Flash,是100%的JavaScript应用。要使用任意字体,只需上传其字体文件到一个 基于网页的字体生成器,然后下载渲染过的JavaScript文件,把它添加到你的网页中即可。

Typeface.js

Cufón
与typeface.js十分相似, Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样,它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件,你即可像使用普通字体一样使用你指定的字体。

译注:这两个工具对于中文网页不太实用…… (⊙_⊙)

7. 调试与记录

Blackbird
在JavaScript开发过程中,经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台,用以记录、查看和过滤JavaScript


当前日志信息