Bin-Blog logoBin-Blog

Learn about the latest in Web Development – as soon as I do.

JSL – a New JavaScript Library

By • Jul 20th, 2008 • Category: Browsers, CSS, JavaScript, Web Development

Javascript Rhino Logo

Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.

Download

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

JSL Links

License

BSD, as always.


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>