[RESOLVED] JS Adapter for Framework

Hey Guys!

I’m planning to write an Adapter between an used JS Framework (e.g. jQuery,Prototype,…) and my actual code. This Adapter should be easily extensible and simple.

It will be used to enable JS support in an PHP framework. So therefore when someone wants to write an extention for the PHP Framework it should be easy to to add additional js functions to the adapter. This extentions will normally have their code in an seperate js file. This will be added or the build process will merge all js files into one big.

My solution to this was the code below.

Because the js code isn’t displayed here very well you can also find the code here: [url]http://www.extpaste.com/#2894[/url]

[CODE lang=javascript]/*
* This adopter file gets added after the js library (Prototype, jQuery, …) is added
* This is the jQuery adapter axample
*/

/* These are the base functions, which are similar in all adopters */

var myFramework = {
/**
* The version of the framework
* @type String
*/
version : ‘0.0.1’,
anyBaseFunction : function() { /* any function */ }
};

/* and here the JS Lib Adopter gets created */

if(typeof jQuery == “undefined”){
throw “Unable to load java script support, jQuery not found.”;
}

(function(){
myFramework.adopter = ‘jQuery’;
myFramework.adoptedFunction1 = jQuery.function1;
// ….
}());

/*
* ——————————————————————————–
* This is an example usage
*/

myFramework.Ajax.request({
url: ‘foo.php’,
callback: someFn,
params: { foo: ‘bar’ }
});

/*
* ——————————————————————————–
* It can be extended like this in an seperat js file like extend_adopter_for_jquery.js
* (the function itself is not tested, just an quick example)
*/

myFramework.fadeOut = function(obj, speed,callback) {
if(typeof obj === ‘String’) {
// this is an id
obj = $(“#”+obj);
}
obj.fadeOut(speed,callback);
// normally fadeOut() should be added to the the Object.Prototype, but some Framework break when you extend the Obejct.Prototype :-/
};

/*
* ——————————————————————————–
* It can be extended like this directly
*/

if(myFramework.adopter===’jQuery’) {
myFramework.fadeOut = function(obj, speed,callback) {
if(typeof obj === ‘String’) {
// this is an id
obj = $(“#”+obj);
}
obj.fadeOut(speed,callback);
// normally fadeOut() should be added to the the Object.Prototype, but some Framework break when you extend the Obejct.Prototype :-/
};
} elseif(myFramework.adopter===’YUI’) {
//…
} else {
myFramework.fadeOut = function(obj, speed,callback) {
// there is no known lib, so make it simple
if(typeof obj === ‘String’) {
obj = document.getElementById(obj);
}
obj.style.display = ‘none’;
callback.call(this);
}

myFramework.fadeOut(‘hideMe’,100,someCallback);
[/CODE]

Which approach would you choose?
Do you have better ideas?

thx
Gaius

Also in #JavaScript _↴