[RESOLVED] Is it good form to assign functions/objects as attributes of HTML elements?

sneakyimp

I'm working on an HTML/Javascript tree view widget and am wondering if it's good form to assign functions or complex data objects as attributes of an html page element.

Something like this:

function addFunc() {
  var el = document.getElementById('tree_0');
  if (!el) {
    alert('could not find element');
	return;
  }
  el.myFunc = function () {
  	alert('this does work by the way');
  }
}

It works in both IE 7 and Firefox 2.

NogDog

It's probably more common (though not necessarily more correct) to define the function separately, For instance:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<script type="text/javascript">
/* define a function */
function myAlert(text)
{
   alert(text);
}
/* define an object that includes that function */
function myObject(id)
{
   this.element = document.getElementById(id);
   this.alert = myAlert;
}
</script>
</head>
<body>
<p id="nogdog" onclick='nogdog.alert(nogdog.element.innerHTML);'>Click me.</p>
<script type="text/javascript">
var nogdog = new myObject("nogdog");
</script>
</body>
</html>

sneakyimp

I'm seeing something very similar to that in the YUI toolkit. Javascript classes are wonk.

NogDog

sneakyimp wrote:
I'm seeing something very similar to that in the YUI toolkit. Javascript classes are wonk.

Yeah, I'm by no means a JavaScript guru and have never felt really comfortable with it, so there may well be a better way.

rulian

You can create objects and have properties assigned to like NogDog is doing
however to extend properties of existing predefined elements like you are doing is a bit tricker. I've seen it done via the prototype method, prototypejs makes extensive use of this method.

sneakyimp

OK so I'm dynamically creating a bunch of HTML elements to render a tree view and now I'm wondering if I'm better off having a single function to handle onclick which receives a nodeID and looks up the right node to apply changes like this:

var nodesArray // this contains a references to every node in the tree
function switchStyles(nodeID) {
  // look up the node in a huge array of all nodes
  var node = nodesArray(nodeID);
  var element = node.htmlElement;
  // check properties, find
  if (node.boolSelected) {
    // apply the 'selected' class to it
    element.className = 'selectedStyle';
  }
  //etc
}

Or whether I should attach properties and functions to each html element like this:

		var labelDiv = document.createElement('div');
		outerDiv.appendChild(labelDiv);
		labelDiv.id = this.sRootElementID + '_' + aChild.iNodeID + '_l';
		labelDiv.className = this.classNameLabel;
		labelDiv.isSelected = false;
		var sOver = this.classNameLabelOver
		var sOut = this.classNameLabel;
		var sSel = this.classNameLabelSelected
		labelDiv.onmouseover = function () {
			if (this.isSelected) {
				this.className = sSel;
			} else {
				this.className = sOver;
			}
		}
		labelDiv.onmouseout = function () {
			if (this.isSelected) {
				this.className = sSel;
			} else {
				this.className = sOut;
			}
		}

sneakyimp

OK so apparently Javascript has memory leak issues that relate directly to this conversation. A few folks here describe under what circumstances the memory leaks occur and it appears to be exactly what I was talking about -- having functions and DIVs (or other elements) referring to each other. It also seems to happen when you create closures as event handlers for DOM nodes....or something like that.

At any rate, I think I'll be leaning toward the global-function-takes-an-id-and-looks-up-the-object-in-an-array approach here. Or maybe I'll write some kind of purge function or reference remover.

Weedpacket

sneakyimp wrote:
Javascript classes are wonk.

Trust me; it'll make much more sense once you realise that Javascript doesn't have classes.

Unless you implement them yourself. If classical inheritance is what you want.

Javascript lets you do that.

having functions and DIVs (or other elements) referring to each other.

That's a problem in IE, which uses two separate (and to some extent incompatible) memory management systems for the DOM and Javascript runtime. In other words it's due to a shoddy browser implementation.

sneakyimp

I think I have the situation worked out. Interestingly, I find it's much faster to just generate a bunch of HTML and then assign that to the innerHTML of some element on the page. Who knew? It's also much faster now.

I did some experiments with different variants of the code. My original approach (assigning anonymous functions directly to html elements) was a MEMORY HOG. I noticed that the YUI tree view widget defines a global function (or namespaced one---hard to say in that mess) which each element can call.

Anyways, long story short I'd say NO it's not good form to assign functions or objects as properties of DOM elements...you will likely chew up lots of memory and still suffer performance problems and possibly memory leaks.