Hey all,
I'm about to port a series of my jQuery projects over to Vanilla Javascript (pure javascript, no framework) and would like to know if there are any existing [framework adapters / framework agnostic adapters] out there?
For instance I'm envisioning something like this:
// My Project
(function(){
// Fetch all the elements using Sizzle Selector System
var $els = Agnostic.find('.penguins');
$els.hide();
// Perform a Ajax Request
Agnostic.ajax({
dataType: 'json',
sucess: function(){
},
error: function(){
}
});
});
/**
* Our Agnostic Framework
* Provides a framework agnostic interface for jQuery and MooTools
*/
var Agnostic = {
framework: null,
Framework: null,
/**
* Initialise our Agnostic Framework
*/
init: function(){
switch ( true ) {
case Boolean(jQuery||false):
Agnostic.Framework = jQuery;
Agnostic.framework = 'jQuery';
break;
case Boolean(MooTools||false):
// Check for Sizzle
if ( typeof Sizzle === 'undefined' ) {
throw new Error('MooTools interface requires the Sizzle Selector Engine.');
}
Agnostic.Framework = MooTools;
Agnostic.framework = 'MooTools';
break;
default:
throw new Error('Could not detect a framework.');
break;
}
}
/**
* Our Element Object
* Used to Wrap the Framework's Object to provide an Agnostic API
*/
Element: {
/**
* Create the Element Wrapper
*/
create: function(Object){
var El = new Agnostic.Element;
El.Object = Object;
},
/**
* Hide the Element
*/
hide: function(){
switch ( Agnostic.framework ) {
case 'jQuery':
this.Object.hide();
break;
case 'MooTools':
this.Object.setStyle('display','none');
break;
}
},
/**
* Show the Element
*/
show: function(){
switch ( Agnostic.framework ) {
case 'jQuery':
this.Object.show();
break;
case 'MooTools':
this.Object.setStyle('display','');
break;
}
}
},
/**
* Fetch elements from the DOM using the Sizzle Selector Engine
*/
find: function(selector){
var Element = null;
// Fetch
switch ( Agnostic.framework ) {
case 'jQuery':
Element = jQuery(selector);
break;
case 'MooTools':
Element = new Elements(new Sizzle(selector));
break;
}
// Wrap
Element = Agnostic.Element.create(Element);
// Return Element
return Element;
},
/**
* Perform an Ajax Request
* We use the jQuery.ajax interface here
* But they are more or less the same
*/
ajax: function(request){
// Send Request
switch ( Agnostic.framework ) {
case 'jQuery':
jQuery.ajax(request);
break;
case 'MooTools':
(new Request(request)).send();
break;
}
// Wrap
Element = Agnostic.Element.create(Element);
// Return Element
return Element;
}
};