There are countless popular JavaScript libraries, jQuery, MooTools, Prototype, Dojo, YUI. These JavaScript libraries are feature-rich, and with their plugins, they can do almost any job. However, this comes at a cost. These libraries often cause your web pages to be bloated in size. In some cases, if you only want to complete a specific job, you can use some lightweight libraries with more specialized functions. This article introduces 40 excellent lightweight JavaScript libraries.
1. Form related
A low-key open source project that simplifies most commonly used JavaScript form functions, including form validation functions that can be used directly. In addition, it also includes powerful form synchronization and form condition judgment functions.
Another low-key JavaScript form validation framework. It has integrated logic, and some settings can be global, individual forms or individual objects. Provides two APIs, integrating AJAX support, caching, and callback functions. It provides HTML-like API statements, as well as object-oriented JavaScript API.
LiveValidation ( http://www.livevalidation.com )
A lightweight form validation library. In addition to the traditional verification function, it also provides real-time verification, which can be verified once you enter it. Ruby on Rails users may find this library useful because their naming conventions and parameters are very similar. The library has both a standalone version and a prototype version.
yav ( http://yav.sourceforge.net/en/index.html )
A powerful, flexible, extensible form validation library. Supports a variety of scenarios, from simple validations such as dates, email addresses, and integers, to complex ones such as regular expressions. Built-in AJAX support, the output error message can be located at the object level.
qForms ( http://www.pengoworks.com/index.cfm?action=get:qforms )
A complete solution for processing forms. Features include various validation rules, mechanisms to prevent multiple postings, and the ability to lock or unlock input fields.
formreform ( http://code.google.com/p/formreform/ )
Multi-column design that is not table-based has always been a challenge. This tiny library turns traditional forms into beautiful multi-column forms.
2. Animation related
$fx ( http://fx.inetcat.com/ )
A lightweight library for making HTML objects animate. You can change any CSS property on a timeline, and for complex animations you can combine effects, group objects, and make them move in parallel.
JSTweener ( http://coderepos.org/share/wiki/JSTweener )
A JavaScript library that generates intermediate frames. Its API is similar to the famous intermediate frame engine Tweener. You can specify the animation time and define transition effects and delays. Events can be triggered at almost any point.
Facebook Animation ( http://developers.facebook.com/animation/ )
A powerful tool for creating customizable CSS-based animations. In Facebook animations, a few lines of code can improve the UI. The syntax is the same as FBJS (the library for Facebook).
FX ( http://ryanmorr.com/archives/fx-lightweight-and-standalone )
A lightweight JavaScript library with YUI-like syntax that can create in-between frames for almost any CSS property. Supports color and scroll animation, just set the to and from values for the object.
3. Visual and Graphical Effects
JS charts ( http://www.jscharts.com/ )
Supports bar charts, pie charts and simple curve charts. Insert this library directly into a web page and call data from an XML file or JavaScript array variable. PNG format, compatible with all major browsers.
Canvas 3D JS Library (C3DL) ( http://www.c3dl.org/ )
C3DL makes writing 3D programs easy. Provides a set of mathematics, scene and 3D object classes to develop 3D content directly in the browser without requiring deep 3D knowledge.
Processing.js ( http://ejohn.org/blog/processingjs/ )
This is a porting of the Processing language to JavaScript. 2D output is feature-rich. Provides processing functions for drawing, color processing, fonts, objects, etc.
Rapha? l( http://raphaeljs.com/ )
An amazing JavaScript library for implementing vector graphics on the web. Using SVG, graphics created with VML can be changed or events bound. Extremely rich in functions, including rotation, animation, zoom, etc.
ImageFX ( http://www.nihilogic.dk/labs/imagefx/ )
This JavaScript library adds effects to images such as blur, sharpen, emboss, highlight, etc. ImageFX uses canvas objects to achieve these effects and is compatible with all major browsers. This library is very easy to use, just insert the .js library file into the web page and call those functions.
Pixastic ( http://www.pixastic.com/ )
Pixastic uses the HTML5 canvas object, allowing manipulation of raw pixels. Effects include desaturation, grayscale, inversion, brightness, contrast adjustment, hue, saturation adjustment, as well as relief, blur and other effects. Because it uses the HTML 5 canvas object, it is not yet compatible with all browsers.
Reflection.js ( http://cow.neondragon.net/stuff/reflection/ )
A very low-key JavaScript automatically implements the reflection effect. The height and transparency of the reflection can be adjusted. Supports all major browsers, file size is less than 5K.
4. Database
Taffy DB ( http://taffydb.com/ )
A JavaScript library that can be thought of as SQL Server in the browser, or an advanced array manager. In programs that use AJAX, it can be used as a database layer to create, read, edit, delete data, use loops, sorting, and advanced queries.
ActiveRecord.js ( http://www.activerecordjs.org/ )
This library supports Google Gears as well as Chrome, Aptana Jaxer, Adobe AIR and any platform that supports HTML 5 SQL specifications (currently Webkit and iPhone). Tables can be automatically created, data validated and synchronized.