What is the best way to create library agnostic wrapper for JS library selectors? I have a custom JS framework, that aims to be as library-agnostic as possible. The problem I have is that for example Mootools enhances the returned DOM element with it's own specific methods (inject, adopt etc.), and I don't want these to be visible to the modules, layered on top of the framework (as Nicholas Zakas once described), to prevent misuses/accidents.
As a simple first-aid I created a custom selector that uses Mootools, it then creates custom Element -object/wrapper and hands selected (and enhanced) Mootools DOM element to it, thus the Mootools enhanced methods are not directly visible to the modules above. The problem with this approach is that I lose all the native functionality of the DOM element (value, style etc.) if it's not specifically coded to the wrapper (Element).
Is there another and/or better way to do this? Something that would extend the native DOM element, thus providing the native properties/methods automatically AND offering advanced functionality through the wrapper (via Mootools, jQuery, whatnot...).
Some example code, how it's currently done:
/*
* Wrap the native library element
*/
Element = function(_libElement) {
// Store native object
var libElement = _libElement;
return {
addClass: function(_class) { libElement.addClass(_class); return this; },
removeClass: function(_class) { libElement.removeClass(_class); return this; },
hasClass: function(_class) { return libElement.hasClass(_class); }
};
};
/*
* Custom selector
*/
getElement = function(_query) {
var elements = $$(_query);
// Wrap each element to Element wrapper
var num = elements.length;
while(num--) {
elements[num] = new Element(elements[num]);
}
return elements;
};