Forty very practical lightweight JavaScript Libraries

Popular JavaScript libraries, such as jquery, mootools, prototype, dojo, and Yui, help you complete common JavaScript tasks. These JS libraries provide many ready-made functions for client actions (events), animation effects (effects), and Ajax applications. In addition, if one of these libraries cannot directly achieve the desired effect, there may be related plug-ins that meet your requirements.

The flexibility of the Javascript Library provides convenience for our work, but it also has advantages and disadvantages-for example, the Javascript file is too large. Although giving up these famous JavaScript libraries can show your talents, you may still be willing to use JavaScript libraries that are small and focused on specific tasks.

Below are 40 independent JavaScript libraries that help you achieve specific purposes. Of course, this is not just what can be used on the Internet, but every web designer and programmer should be able to gain some benefits here.

1. Form

Wforms

Wforms is an open-source, non-invasive (unobstrusive) Note * code library that simplifies most common JavaScript Functions related to forms. It can verify the user input values of the form. You only need to add a specific class to the form element. In addition, wforms provides powerful form synchronization (for example, "select all") and conditional form (for example, if X is selected, Y is displayed) functions.

Validanguage

Validanguage is a non-invasive JavaScript form verification framework. It has an inheritance logic that can be defined globally or separately for each form or element. Using the two APIs provided by the author and features such as integrated Ajax support, caching, and calling functions, the Framework provides a robust (robust) verification experience. The two APIs are used for advanced settings. They are the HTML-language APIs added in the annotations and the JavaScript-Object-based APIs.

Livevalidation

Livevalidation is a lightweight JavaScript library that provides a series of verification functions. In addition to the classic verification method, this library also has the live validation feature to control specific areas in real time based on the text you typed. Ruby on Rails developers will find livevalidation very useful because their naming rules and parameter settings are very similar. Although it is an independent database, there is also a prototype version note *.

Note * that the prototype library is dependent on, but the code version is more concise.

Yav

A powerful, scalable, and flexible form verification code library. Yav can handle various situations, from basic verification of dates, emails, integers, to advanced applications such as mask text boxes and custom regular expressions. This library has built-in Ajax support and can easily display custom error information at each object layer.

Qforms

Complete Solution for processing forms. It provides developers with features such as multiple verification rules, blocking multiple submissions, and locking/disabling domains.

Formreform

Multi-column layout without tables is usually challenging. This small code library can convert a simple form into a column, two columns, or four columns formatted layout form. Formreform can automatically adapt the form style to any design.

2. Animation

$ FX ()

$ FX () is a lightweight code base for users to add animations to HTML elements. With this library, you can specify to change any CSS attributes within a certain period of time. For complex animations, You can merge effects, group effects, and link them to respond or at the same time. You can also set different callback actions for each animation step for further customization.

Jstweener

The javascript library of the compensation animation. Its API is similar to the tweener of the famous ActionScript animation engine. You can call the animation time to define the shape Transformation Mode and delay. You can trigger new actions at almost any time point (for example, onstart-start, oncomplete-finish, onupdate-update.

Facebook Animation

A powerful code base for creating CSS-based custom animations. Using one or two lines of Facebook animation, you can improve the user interface. The syntax of this code library follows fbjs (the code library used in Facebook utility). Once learned, you will be able to create a Facebook utility!

FX

A lightweight code library with syntaxes similar to Yui. FX allows you to create an animation for almost all CSS attributes. Supports color and scroll animation. You only need to design any object. The starting and ending values of any attribute are enough.

3. Visual and image effects

JS charts

JS charts can output bar charts, pie charts, and graphs. You only need to call data from an XML file or Javascript array, which provides excellent ease of use. The chart is output as a PNG image file. This library supports most popular browsers.

Canvas 3D JS Library (c3dl)

C3dl makes it easier to write 3D applications. It provides a set of algorithms, scenarios, and 3D objects. For programmers who want to develop 3D content in a browser but do not have deep algorithms for 3D images, it is a great boon.

Processing. js

This JavaScript library points to the processing language (a language used for image, animation, and interactive programming ). It has rich features for creating 2D outputs, providing shape/Image Rendering methods, color processing, fonts, objects, Algorithm functions, and so on.

Rapha? L

A superb code library that simplifies the use of vector graphics on Web pages. Rapha? L use SVG and VML to create images and bind action processors to these images. This library has powerful functions, including rotation, animation, scaling and drawing curves, rectangles, and circles.

Imagefx

You can add special effects to images, such as blur, sharpening, relief, and brightening. Imagefx uses Canvas elements to create effects. Compatible with all mainstream browsers (you can see the compatibility list on the page ). This library is easy to use. You only need to insert a. js file in the webpage and call it with a line of code.

Pixastic

Pixastic uses the HTML5 canvas object, which can directly process pixel-level data. Supported effects include fade and fade, reverse, flip, brightness and contrast adjustment, hue and saturation, relief, blur, and so on. Because the canvas objects are relatively new, various browsers have different levels of support for this JavaScript library.

Reflection. js

Automatically creates a javascript library without interfering with the reflection effect. The height and transparency of reflection can be customized. Using this library is as simple as adding a "class" to the image. It works normally in all mainstream browsers. The file size is less than 5 kb.

4. Database

Taffy DB

It can be used as JavaScript in the browser's SQL database, or as an advanced "array manager ". In Ajax-based Web applications, it can work at the database layer. You can create, read, edit, and delete data, or use cycles, categories, and advanced query methods.

Activerecord. js

This library supports Google gears, chrome, Aptana jaxer, Adobe AIR, and any platform that supports W3C HTML5 SQL specifications (now WebKit and iPhone support ). It makes it easy to use databases in JavaScript. With activerecord. JS, You can automatically create data tables, verify and synchronize data.

5. String and mathematical functions

Date. js

Dealing with dates is always easy to confuse people. So many vertices, slashes, and formats. Datejs provides simple or complex date functions in a refreshing way. It can process dates in the following format: "Next Thursday" (next Thursday), "+ 2 years" (two years later), and all formats such as 2009.01.08, 12/6/2001.

Note: This function is very useful. Which of the following friends can translate it into Chinese to support Chinese.

Sylvester

This JavaScript library can easily process vectors and matrices. With it, you don't have to be overwhelmed by a string of loops and a large number of arrays. This library contains classes of modulus vectors and matrix of any dimension, so that you can calculate the modulus of an infinite line and the plane in 3D space.

Pretty date

A smart JavaScript solution that allows the date of the past month to be displayed in a more beautiful and user-friendly manner. It allows the date to be displayed as long as the current time, such as "3 days ago" and "yesterday ".

Xregexp

Regular Expressions can be used by Regexp objects in JavaScript. Xregexp makes regular expressions more powerful and provides features that will be implemented by browsers in the future (according to ecmascript 4-ES4 Development Vision ). Using this library, Regexp objects can be cached and reused, and modifiers can be added to existing Regexp objects.

Javascript URL Library

A JavaScript library for processing URLs. If needed, it can control to treat each part of the URL as a string. This URL code library has just been released, but it can work as it was just mentioned.

 

6. Font

Typeface. js

A code library used to use any font on a webpage. Unlike popular solutions such as sifr and fliR,Typeface. jsFlash is not required. It is a JavaScript Application of 100%. To use any font, you only need to upload the font file to a webpage-based font generator, download the rendered Javascript file, and add it to your webpage.

Cufón

Similar to typeface. JS,CufónIt is also a code library that allows you to use TrueType fonts on webpages. Similarly, it uses a generator to convert a font file to a VML image. You only need to insert the generated. js file into the webpage. You can use the font you specified just like a regular font.

7. debugging and recording

Blackbird

During Javascript development, the alert () function is often used to add breakpoints.BlackbirdA stylized console is provided to record, view, and filter messages in Javascript, eliminating pauses in each alert () and better analyzing them to speed up the development process.

Nitobibug

Browser-based, cross-browserJavaScript Object logging and detection Components. By inserting rules in your code (similar to the usage of JavaScript objects), you can easily distinguish between simple types, such as strings, Boolean values and values, and complex elements, such as error messages and JavaScript objects.

Firebug Lite

FirebugIt is probably the best JavaScript debugging tool in the world. Unfortunately, it can only be used in Firefox. To have a similar tool in all browsers, add this tool to Your webpageFirebug LiteFor. js files, you are familiar with functions and interfaces.

8. Others

Swfobject

SwfobjectIt is the most popular method with the best scalability to insert Flash videos. This library complies with web standards and generates a token that can pass verification. It can automatically detect users' Flash Player versions. if the version does not match, it also allows you to display alternative content to users. You can take a good look at the article "Why swfobject should be used.

Sorttable and dragtable

Whether you like it or not, tables are still the best way to display data. However, tables can be better used:SorttableSort table data in ascending or descending order. You point to the "add class =" sortable "attribute. You can also exclude certain columns so that they are not automatically sorted, and specify which columns are the default values in ascending or descending order.DragtableMakes the row and column of the table scalable. After the database is inserted in the webpage, add a class = "dragtable" to the table. If you need to use both functions, you only need to include two databases at the same time in the webpage, and then add class = "sortable dragtable ".

Dd_roundies and dd_belatedpng

Dd_roundiesIs an excellentCreate rounded corners without using images. It focuses on IE and solves the problem by using VML. Other browsers are ignored because they support the border-radius attribute of CSS.

Dd_belatedpngProvides a customizable solution to the notorious IE6 PNG issue. Whether PNG images are used in "src" or "background-image,Dd_belatedpngCan solve it. Unlike other solutions, the "background-position" and "background-repeat" attributes can also work normally!

Custom JavaScript dialog boxes

Used to createCustom dialog boxLightweight (about 4.5 kb) code library. Four types of dialog boxes are available: alerts (error), warnings (warning), prompts (prompt), and success (SUCCESS ). With a simple function, you can customize the title, content, and display time of the dialog box.

Gamejs

GamejsIs a javascript version of Microsoft's xNa game framework that uses "canvas" as a rendering mechanism. Javascript is not the best platform for programming games. But if you are a javascript developer for games with low frame rate requirements, why not? This library contains easy-to-use classes that control game elements, screen display, and keyboard operations.

Shortcuts. js

Since Google Reader and Gmail, keyboard shortcuts in Web applications have become increasingly popular because they greatly improve ease of use.Shorcuts. jsProvides functions that help you easily process keyboard shortcuts. Use this library, create shortcuts, and then run the function while pressing the keyboard to make it easier to implement.

Mapstraction

Different map providers provide different APIs. If you want to convert between suppliers (for example, from Google map to MapQuest), you need to rewrite some code.MapstractionIt is used to help you solve this problem. It provides a general API that helps you switch between most popular map providers. You only need to update a line of code to complete the conversion.

Amberjack

A small JavaScript library that adds beautiful guide information to your website. Once it is enabled, a modeled content box will introduce you to your site just like a tour guide, and you can add any content you want in the box. The code of the tour guide content can be manually written or automatically generated using an online tool. Of course, you can write CSS or use instantly available themes to make the tour guide information conform to the style of the content box.

Jsload

The remote loading API of the Javascript library. Jsload is a simple API that allows you to import large JavaScript files from Google servers. Jsload can automatically load dependent files of any version of the code library.