What would be the best way to abstract away any given JavaScript framework (jQuery, MooTools etc.), that sits on the bottom of the framework stack? Essentially, I would like to have a situation where I could swap out the library, do changes only to one layer of the framework (not to every module, for example), and the whole thing could be up and running again.
So, every module should call a framework function(s), which would then be routed to the library.
You may want to use something like the Adapter Pattern. Create your own interface, exposing the methods that you will be using in your application, and then create an adapter for each toolkit that you would like to support (jQuery, MooTools, YUI, etc). Your own interface would then route the method calls to the specific adapters.
If you were to support a new toolkit, all you’d have to do is to write a new adapter that translates methods from your own interface, to the methods of the specific toolkit.
This is something that Ext JS currently does. You can choose which adapter to use (jQuery, YUI, etc) behind the method calls of the framework. For example:
Ext.getCmp()would use thejQuery.$()when using the jQuery adapter. However, it is often not a very easy one-to-one mapping.