40 practical lightweight JavaScript libraries)

ArticleDirectory

• 1. Form
• 2. Animation
• 3. Visual and image effects
• 4. Database
• 5. String and mathematical functions
• 6. Font
• 7. debugging and recording
• 8. Others

PopularJavascript LibrarySuch as jquery, mootools, prototype, dojo, and Yui. 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 is40 independent JavaScript libraries that help you achieve specific purposes. Not only can this be used on the Internet, but each web designer andProgramPersonnel should be able to gain some gains here.

1. Form

Wforms
Wforms isOpen-source,Unobstrusive)Note *CodeLibraryTo simplify 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,WformsIt also has powerfulForm Synchronization(For example, "select all/do not select all") andCondition form(For example, if X is selected, Y is displayed.

Note * this word is also translated into "not abrupt" and "targeted. Specifically, JavaScript code is separated from HTML code, and it also selectively responds to different versions of browsers to improve user experience. For more explanations, refer to "". The translator believes that "No intrusion" is a combination of the original English text, which is more concise and easy to understand as a term and should be a general translation of this term.

Validanguage
Validanguage is a non-invasiveJavascript 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 featureControl specific areas in real time based on the text you typed.Ruby on RailsDevelopers will find livevalidation abnormal and easy to use, because the naming rules and parameter settings of the two 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 flexibleForm Verification code library.YavIt 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. ExploitationFormreformAutomatically adapt the form style to any design.

2. Animation

$ FX ()
$ FX ()Is a lightweight code library that allows you to add animation effects 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.FXYou can 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 chartsYou can output column 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)
C3dlThis makes it easier to write 3D applications. It provides a setAlgorithmScenarios and 3D objects are a great boon for programmers who want to develop 3D content in browsers but do not have deep algorithms for 3D images.

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 and only needs to be inserted on the webpage.JSThe file is then called with a line of code.

Pixastic
PixasticThe canvas object of HTML5 can be used to 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. UseActiverecord.JSYou 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.DateJSProvides 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.

Note: It's too advanced, and the cold sweat '''-_-|

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.XregexpIt 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
And typeface.JSVery similar,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.

Note: These two tools are not very useful for Chinese Web pages ...... (⊙ _ ⊙)

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.(: Really ?)

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!

Note: This is practical! O (∩) O Haha ~

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 tour 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.