peterS.: [HTMLElement]e mit zusätzlichem Verhalten ausstatten

Beitrag lesen

»[HTMLElement]e mit zusätzlichem Verhalten ausstatten«

oder

»Funktoren als Vehicle für abstrakte Datentypen in JavaScript«

hallo again T-Rex,

wenn Du die direkte referenzierung von [HTMLElement]en beibehalten,
ihnen aber trotzdem zusaetzliches verhalten mit auf den weg geben
willst, solltest Du genau dies mit deinem code abbilden.

Du moechtest keinen zu instanziierenden wrapper schreiben, sondern
die spezialisierung eines abstrakten datentyps - nennen wir die
benoetigte implementierung eines solchen konstrukts einfach mal
»Behavior« oder »Interface« oder eben auch »Trait«.

aus der sicht von JavaScript handelt es sich bei der loesung um
eine funktion, die wie ein konstruktor aufgebaut ist, aber nicht
als solcher ueber den »new« operator aufgerufen wird.

solche funktionen - wir geben ihnen mal den konzeptionellen namen
»Funktor« bzw. »Functor« - werden immer im kontext schon vorhandener
objekte ausgefuehrt und bereichern diese objekte dann um die im
funktor vereinbarte prozesslogik und/oder datenstruktur.

ein moeglicher beispielhafter loesungsansatz für Dein problem sieht
dann so aus und verlangt wie immer der ueberpreufung in der [jconsole]:

//  [document.getCurrentStyle]    - [http://www.pseliger.de/jsExtendedApi/jsApi.document.getCurrentStyle.dev.js]  
document.getCurrentStyle = (function (nodeObj/*[HTMLElement|Node]*/, cssScheme/*[string|String](css-attributes written according to html-css-scheme)*/) {var isElementNode=(function(obj){return(obj&&(typeof obj.nodeName==="string")&&(typeof obj.nodeType==="number")&&(obj.nodeType===1));});var notDefined;var regXHyphenSepatator=(/\-(\w)/g);var replaceWithUppercase=(function(str,$1){return $1.toUpperCase();});var convertHtmlIntoJsCssScheme=(function(cssScheme){cssScheme=cssScheme.replace(regXHyphenSepatator,replaceWithUppercase);return(((cssScheme=="float")||(cssScheme=="cssFloat"))?("styleFloat"):(cssScheme));});var fct=(function(){return notDefined;});if(document.defaultView&&document.defaultView.getComputedStyle){fct=(function(nodeObj,cssScheme){var currStyle;if(isElementNode(nodeObj)){cssScheme=String(cssScheme);cssScheme=(((cssScheme=="cssFloat")||(cssScheme=="styleFloat"))?("float"):(cssScheme));currStyle=document.defaultView.getComputedStyle(nodeObj,"").getPropertyValue(cssScheme);}return((currStyle==="")?(notDefined):(currStyle));});}else if(document.documentElement&&document.documentElement.currentStyle){fct=(function(nodeObj,cssScheme){var currStyle;if(isElementNode(nodeObj)){currStyle=nodeObj.currentStyle[convertHtmlIntoJsCssScheme(String(cssScheme))];}return currStyle;});}return fct;})();  
  
//  [document.getElmPosAbsolute]  - [http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.dev.js]  
document.getElmPosAbsolute = (function (elm) {var x=0,y=0;if(elm&&elm.offsetParent){x=elm.offsetLeft;y=elm.offsetTop;elm=elm.offsetParent;while(elm){x=x+elm.offsetLeft;y=y+elm.offsetTop;elm=elm.offsetParent;}}return{"left":x,"top":y};});  
  
  
var HTMLElementBehavior = (function () { // der funktor [[HTMLElementBehavior]]  
  
  
  this.getCurrentStyle = (function (cssScheme) {  
  
    return document.getCurrentStyle(this, cssScheme);  
  });  
  this.getPosAbsolute = (function () {  
  
    return document.getElmPosAbsolute(this);  
  });  
});  
  
  
var obj = document.getElementsByTagName("div")["output"];  
  
  
HTMLElementBehavior.call(obj); // [obj] das neue verhalten *beibringen*.  
  
  
print("obj.getCurrentStyle(\"background-color\") : " + obj.getCurrentStyle("background-color"));  
print("obj.getPosAbsolute().left : " + obj.getPosAbsolute().left);  
print("obj.getPosAbsolute().top : " + obj.getPosAbsolute().top);

links die zur am heutigen tag ausformulierten erkenntnis fuehrten:

so long - peterS. - pseliger@gmx.net

--
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:]