“Thin” JavaScript framework for cross-browser scripting?

Question

Is there a JavaScript framework that focuses on extending JavaScript by levelling the implementation differences? I don't mean a framework that simply provides the same functionality across different browsers, but something that makes non-standard browsers behave as if they were standards-compliant.

Basically I want something that does for JavaScript what ie7.js does for MSIE or what html5shiv does for HTML5 elements. Or the various workarounds for Web Sockets or Canvas.

I guess jQuery and its ilk could do the trick, but I'd prefer something that allows me to write normal, standards-compliant JavaScript as if there were no differences between the browsers.

EDIT: As every other answer seems to point out that, yes, jQuery is JavaScript and, yes, most JavaScript frameworks try to improve cross-browser compability, let me clarify what I mean.

The differences between JavaScript implementations across different browsers don't have much to do with the language itself these days. Apart from a few built-in methods missing in older browsers, the types mostly behave the same, too. But there are still differences, especially between the present status quo (Chrome/Firefox/Safari) and legacy versions of MSIE (i.e. MSIE 7). Most notably, the DOM tends to have less-or-more subtle peculiarities to its API.

I don't want just a framework that lets me write JavaScript that works across most browsers. Those are a dime a dozen. I want a thin layer that allows me to write code that works in modern browsers and legacy browsers alike. jQuery, Dojo, etc all go way beyond that and provide their own unique APIs instead of unifying the existing ones.

Saying "use jQuery" is like saying I should use Rich Ajax Platform (or other code generation frameworks) if I want to avoid cross-browser rendering differences. I don't want a "substitute", I want a "bugfix" (not literally).

EDIT2: Just to drive the point home: I'm not looking for just any framework. I'm deeply familiar with jQuery, have tried YUI and am currently considering to give Dojo a try. I don't simply want a "good" framework. I want one that fits my very specific description. It's okay if there isn't anything like it, though it'd be interesting to know why not (i.e. technical reasons, not "everybody's too busy using jQuery").

Answer 1

A long time has passed since this question was asked, but perhaps it's of use to someone: recently, a group of developers from Financial Times set up sort of a universal polyfill that only patches the necessary parts for different browsers.. http://cdn.polyfill.io/v1/docs/

Answer 2

If you're as minimalist in your thinking as your post suggests, you might try compiling your own micro-library that provides cross-browser functionality for some of the most often annoying divergences, like addEventListener vs. attachEvent, getTagsByClassName vs. no method, scrolling disparities, window dimensions, etc. Most of the Javascript disparities are actually disparities in DOM methods anyway, and the list, while long, doesn't have to be compiled all at once. Add your own cross-browser functions as they come up in your coding.

Short of that, use jQuery.

Answer 3

All JavaScript libraries attempt to "level the playing field" by allowing you to write clean cross-browser compatible JavaScript code.

Some of the most popular:

Prototype

MooTools

Scriptaculous

jQuery (my personal favorite)

Answer 4

There is no chance of achieving exactly what you want. IE does not expose the prototypes of DOM nodes, so you have no way to extend them without doing it for each individual node. Also, it's usually (maybe always?) not possible to overwrite existing read-only properties of host objects such as DOM nodes in IE, so you won't be able to fix wrongly-implemented DOM properties on DOM nodes themselves. Even if you just fix DOM methods, you'll still need to call a function to do this every time you get hold of a new node reference:

var el = someNode.nextSibling;
fixUp(el); // Adds missing methods to the element and fixes broken ones
var matchingEls = el.getElementsByClassName("someclass");

For a really good, detailed explanation of why what you want is impossible, I'd recommend having a read of this: http://perfectionkills.com/whats-wrong-with-extending-the-dom/

Answer 5

I don't believe there's a simple "make browsers behave correctly" framework - they all go quite significant degrees beyond this.

That said, there's no value in re-inventing the wheel so it might be wise to invest the time in something like jQuery (perhaps using a custom minimal build), etc. whilst ensuring that there are sensible fallbacks for users with JavaScript disabled.

Answer 6

When writing "standard" JavaScript, I tend to define my own functions that provide cross-browser implementations of commonly used features. addEvent and removeEvent (there are several implementations) are common examples of this technique. I've researched and written several functions that enable me to call one function for a specific problem, rather than feature-detect and execute the correct code at every turn.

Things like getting height, width, and offset of an element require different implementations for different browsers, but can easily be written into a function and reused wherever you need them.

So, my "solution" is largely a DIY solution. Create a file called "utilities.js" and start adding functions as you need them. addEvent, removeEvent, and a cross-browser XMLHttpRequest are a good place to start. Here, I'll start you off:

function createXHR()
{
    var xhr;
    if (window.ActiveXObject)
    {
        try
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            alert(e.message);
            xhr = null;
        }
    }
    else
    {
        xhr = new XMLHttpRequest();
    }

    return xhr;
}

That function will return an XMLHttpRequest object for use as you see fit. Enjoy.

Edit: Do note that this approach could theoretically crowd your namespace quite a bit. You may be best off creating a utilities object, and calling utilities.createXHR.

Answer 7

If I've understood you correctly, http://flowjs.com/ should be quite close to what you are looking for. It's main goal: "FlowJS implements the DOM Level 3 API across all modern browsers"

Answer 8

You have that with JQuery. Using JQuery gives you the ability to query the DOM with the consistency that is lacking across the different browswer implementations. I'd say that and ajax calls deals with the largest set of issues that people deal with in JavaScript these days.