Modular Javascript library with functionality similar to jQuery.

Question

jQuery and similar libraries provide a number of useful APIs for DOM traversal and manipulation. Where your site as high number of repeat visitors, their use is easily justified as caching will offset any bandwidth cost to the end user.

In other cases visitors to the site might always be unique and thus the bandwidth penalty for these libraries can be too severe relative to the benefits for a development team.

Are there any libraries that provide this style of DOM interaction while allowing you to choose the parts relevant to your page.

For example,

jQuery('#myId').addClass('error');

and many other APIs in jQuery can be replicated in a few lines of code, thus avoiding ~50kB of downloads.

So the question is, does a library exist that contains these functions with little dependency on other aspects of the library or will I need to create them myself as necessary?

Are there mechanisms/tools available to break down existing libraries like jQuery into their minimal components?

Answer 1

As discussed here, if you use google as a host of the libraries, the user probably already has it cached before they ever get to your site.

This page shows you which libraries are supported. Currently:

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject New!
• Yahoo! User Interface Library (YUI) New!

---

I'm all for rolling your own, but be sure you know all the bugs of all the browser versions if you don't use a library.

Not a bad idea, though. It would be nice if you could create a custom version of jQuery. I'd especially like one for iPhone's Mobile Safari and Adobe AIR that stripped out all the non-webkit stuff.

Answer 2

Check out Sly. Only 3kB.

Answer 3

The production version of jQuery is 19k, same as a rather small image. Not a severe bandwidh penalty in my book!

Edit: ..and worth every k, too.

Answer 4

MooTools allows you to download only the pieces you want. So if all you want is enough for JSON AJAX requests, you've got it.

http://mootools.net/core

Answer 5

Sorry guys I somehow lost the page in which one was asking about JS libraries conflicts solution.

I had the same problem but now I solved it after playing around with some JQuery scripts. I know it is a bit pain in * but lets do it step by step.

First of all let me tell you that in my project I am using two different libraries. I am using Lightwindow and JQuery. I couldn't make both of the libraries function properly BUT I came up with the following script. You have to use this script within each function that is meant to be using the JQuery functions:

//This line says, that dollar sign $ is belongs to the JQuery library.

jQuery(document).ready(function($) { //Your source code goes here.

});

Lets use it in little bit detailed. In my scenario I am having a click button that suppose to call the following function:

        function popups(message, heading, actionlink, linkName) {  

//This is the LINE that tell the rest of the source code //to recognize JQuery functions.

            jQuery(document).ready(function($) {

            // get the screen height and width    
            var maskHeight = $(document).height();    
            var maskWidth = $(window).width();  


            // assign values to the overlay and dialog box  
            $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();  
            $('#dialog-box1').show();  


            // display the message  
            $('#dialog-message-row').html(message);  
            $('#dialog-message-heading').html(heading);  
            $('#dialog-message-actionlink').html("<a onclick=function('x') class='button' id='delete'>"+linkName+"</a>");

           });//CLOSE JQuery translator
        }