Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.
Download
- Packed Version – 13 KB
- Source – 38 KB
Features
The Standard Stuff…
- CSS DOM Selectors
- Ajax Functions
- Event Handling is abstracted
- Ability to change style of an element.
- Extendable by Plugins
- Supports all Modern Browsers
- And more…
And then some…
- Function Chainability
- Entire Library is 13 KB(un-gzipped)
- Special handlers for Arrays, Numbers
- Extra Plugins for Unit Testing and Debugging
- Functional Programming Encouraged (map, reduce, filter, etc functions in JSL.array)
Missing Features
- XPath Selectors
- Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.
- innerHTML Alternatives
- I like innerHTML – so I did not include the functions to create DOM elements.
- Animations/UI Elements
- You will not see any animation functions in this library. Also, no Drag and Drop, sliders, JS dialog boxes and the like. Of course, I may write a plugin for these elements – but right now, they are not supported.
- JavaScript Monkey-patching
- I don’t do any Prototype style addition to JavaScript standard objects. I hate that – and so should you.
- Functions in the global namespace
- Everything that I do is under the JSL namespace – except for two shortcut functions –
jslib()and$(). So my library adds only three global variables to the namespace – JSL, jslib, and $. - The Kitchen Sink
- JSL is a small library – if you want a library with everything, opt for Dojo or YUI.
Some Sample Code
Using Event Handler…
JSL.dom("a").click(function(e) { // Adds a click event handler to all links
alert(this.href); //Shows the link URL
JSL.event(e).stop(); //And stops the event from propagating any further
});The $() Function…
$("div.content p.intro a").setStyle({
"text-decoration":"underline",
"color":"red"
});And everything you expect to work with document.getElementById() works with $() as well…
$("element-id").innerHTML = "Hello World";
$("element-id").getElementsByTagName("a"); // Returns all the anchors under that element.See More Sample Code