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

5. String And Math Functions

Date.js
Working with dates are always tricky. So many dots, slashes and formats. Datejs is a stunning library for simple to complex date functions. It can parse dates like: “Next thursday”, “+2 years” and all formats like 2009.01.08, 12/6/2001 etc.

Datejs

Sylvester
This is a JavaScript library for doing vector and matrix math easily, without using a lot of loops and getting lost between arrays. It includes classes for modelling vectors and matrices in any number of dimensions and for modelling infinite lines and planes in 3D space.

Sylvester

Pretty Date 
A smart JavaScript solution for displaying dates within the past month in a prettier and more user-friendly way. It displays dates relative to the current time; for example, “Yesterday,” “3 hours ago,” etc.

Pretty Date

XRegExp
Regular expressions can be already used in JavaScript with the RegExp object. XRegExp adds more power to RegExp with features that will be part of the browsers of tomorrow (according to proposals for ECMAScript 4 - ES4). Using the library, RegExp objects can be cached and reused, modifiers can be added to existing RegExp objects and more.

JavaScript URL Library
A library for handling and manipulating URLs more easily. It is possible to reach every part of a URL as a string and modify it when needed. This URL library is very new but already works as mentioned.

6. Fonts

typeface.js
An unobtrusive library for using any font on a website. Unlike popular solutions like sIFR or FLIRtypeface.js doesn’t require Flash and is 100% JavaScript. To use any font, upload the TrueType font file to a Web-based generator, and download the rendered JavaScript file and include it in your Web pages.

Typeface.js

Cufón
Very similar to typeface.js, Cufón enables you to use any TrueType font in a website. Again, it converts the font to VML with a generator. After inserting the generated .js file in your Web pages, you can use the font like any other.

7. Debugging And Logging

Blackbird
Alert()s are widely used to create checkpoints in JavaScript development. Blackbird offers a stylish console to log, view and filter messages in JavaScript, which quickens the development process by eliminating the pause at every alert and analyzing each better.

Blackbird

NitobiBug
A browser-based, cross-browser JavaScript object logging and inspection utility. By inserting rules in your code (like which object to follow), you can have it distinguish between simple types, like strings, booleans and numbers, and complex objects, like error messages and objects.

NitobiBug

Firebug Lite
Firebug, which sadly only works with Firefox, is one of the best debugging tools around. To have a similar tool for all browsers, insert the Firebug Lite .js file into your Web pages, and you get the functionality and interface you’re used to.

Firebug Lite

8. Other

swfobject
swfobject is the most popular and flexible method for embedding Flash movies. It is unobtrusive, generates valid markup and can detect the version of a user’s Flash Player, allowing you to display alternate content if the required Flash version is not loaded. A nice article on “why swfobject should be used” can be foundhere.

swfobject

sorttable and dragtable
Tables, like them or not, are still one of the best ways to present data. But they can be better: sorttable is a library that makes tabular data sortable, both ascending and descending. To do this, simply add class=”sortable” to the table. You can also exclude certain columns from being sorted and make either ascending or descending the default behavior. dragtable is another library that makes columns draggable. After inserting the library in the Web page, add class=”dragtable” to the table as above. Best of all, both libraries can be used together. Simply add class=”sortable dragtable” to the table after including both libraries in the Web page.

DD_roundies and DD_belatedPNG
DD_roundies is a great JavaScript solutions for creating rounded corners without using images. It is focused on IE and supports it through VML. Other browsers are ignored because they support CSS’s border-radius property.

JavaScript Rounded Corners
DD_belatedPNG is a library that provides a customizable fix for the notorious IE6 PNG problem. Whether the PNG is used as “src” or “background-image”DD_belatedPNG can fix it. Unlike other solutions, “background-position” and “background-repeat” properties work as expected too.

Custom JavaScript Dialog Boxes
A lightweight library (about 4.5 KB) for creating custom dialog boxes. Four boxes can be displayed: alerts, warnings, prompts, success. With a simple function, you can specify the title of the box, the content to be shown and how many seconds to show it for.

Custom Dialog Boxes

GameJS
GameJS is a JavaScript-ported version of Microsoft’s XNA Game Framework that uses “canvas” as the rendering device. JavaScript is not the best platform for creating games. But for games with less FPS, and if you are a JavaScript developer, then why not? The library includes handy classes for controlling the objects, drawing and keyboard controls.

GameJS

Shortcuts.js
Starting with Google Reader and Gmail, keyboard shortcuts in Web applications have become popular because they improve usability so much. Shorcuts.jsprovides functions to handle keyboard shortcuts more easily. Using the library, it is possible to create hotkeys and run functions at the press of a button.

Mapstraction
There are several mapping providers that provide different APIs. If you need to switch providers (say from Google Maps to MapQuest), codes need to be updated. That’s where Mapstraction comes in. It provides a common API that covers most of the popular mapping providers. By simply updating a line of code, it is possible to switch between them.

Mapstraction

Amberjack
A tiny JavaScript library (about 4 KB) that helps you add good-looking website tours to your website. Once activated, a modal box guides users by displaying any type of content. The steps in the tour can be hand-coded or generated online. Also, tours can be made to match the look of the modal box, either via CSS or with a ready-to-use theme.

Amberjack

JsLoad
Remote loading API of JavaScript library. JsLoad is simple API that enables you to import big JavaScript libraries from Google server. JsLoad load dependencies of any version of the library automatically.

About the author

Umut Muhaddisoglu is a Web designer/developer. He runs WebResourcesDepot, a blog presenting free Web design and development resources everyday. To connect with the author, you can follow him on Twitter.

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值