For the last few weeks I have been working on a new JavaScript Library. Its still not ready(I have to write some more test) for publishing - so I thought that I will create a small preview for it. My library is heavily influenced by jQuery. All the good features belong to jQuery - all the bugs belong to me.
Features
The features in my library(apart from the standard stuff) include...
- Chainability
- CSS 3 Selectors
- Lots of shortcut - to make you your code smaller and more unreadable
- Special handlers for Arrays, Numbers
- Extra Plugins for Unit Testing and Debugging
Sample Code
Enough talk - this is what you can do with the Library...
Add the class 'term' to all 'dt' elements
JSL.dom("dt").addClass("term");Using the 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
});Returns an array of all the external links of all the anchor in the para with ID 'intro'
JSL.dom('p#intro a[href^="http://"]').map(function(ele) { return(ele.href); }).get();
JSL.dom('p#intro a[href^="http://"]').map("ele.href").get(); //A shorter method to do the same thing as the above lineAttach a 'mouseover' handler to an element with the id 'an_id'
JSL.dom("an_id").on("mouseover", function(e) {
//Do something here
});Unlike jQuery, you don't have to specify # if it is an ID.
JSL.dom("an_id").innerHTML; // This works as wellArrays
And 1 to each element of the first array and return the result
JSL.array([4,10,65]).map(function(current_item){ return current_item+1; }).get();Same as the above - except we use a shortcut - and we use an associative array.
JSL.array({"a":23,"b":15,"c":42}).map("ele+1").get();Other functions like map, filter, grep, each, reduce are also supported.
Ajax
Basic Ajax syntax
JSL.ajax("data.php").load(function(txt){
alert(txt); //Fetches the URL data.php - and passes it to this function.
});Send the data using POST method - and parsing the Json string.
JSL.ajax("data.php?world=warcraft").load(function(data){
// Do stuff with 'data'
}, "json", "POST"); //The json argument will make the function eval the data before passing it.Todo
The Todo list is much larger than the Done list.
- Bugs - lots of them
- More Features
- Compressed Release
- More Tests
- Documentation!
Comments
Interesting work. Even though its far from being a viable alternative to jQuery, I can see a few reasons why you'd want to develop it.
m not so sure about the removal of the # while accessing an element by id. A typical CSS selector without a hash usually refers to a tag, so it should maintain consistency. The array functions are a nice touch, though.
If there's anything I'd like to add to jQuery, it'd have to be a function to create elements in a more programmatic fashion, i.e.:
... which would create a..
I know it's smaller to do what jQuery requires you to do right now, which is:
... but I like my suggested method because it's more consistent with the other jQuery functions.
Just a thought...
P.S.: I think I'll just go ahead and write my own custom '.create' function for jQuery!
I have already created such a function - but decided against using that in the library.
CreateDOM
innerHTML is still the easiest method for that IMO.
$('paragraph').insert(new Element('a', { href: 'http://aalaap.com', target: '_blank' }).update('Aalaap.com'));
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.