PDA

View Full Version : Element.prototype



Tabo
06-22-2008, 11:34 AM
How can I get it to work in internet explorer without using the horrible htc files?

jscheuer1
06-22-2008, 02:02 PM
What's so horrible about htc files? Anyways, I've always just used functions for manipulating elements. The prototype model really has little to offer over the function model other than a certain elegance in the way that the code looks. I would, of course use it for elements, if it were cross browser, which it is not.

You can still do some fun things with prototype String and Array - those work in most browsers:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
Array.prototype.hide = function(v){
for (var i = this.length - 1; i > -1; --i)
if (typeof this[i] == 'object' && this[0].tagName)
this[i].style.visibility = v;
}
String.prototype.arEl = function(){
return [document.getElementById(this)];
}
</script>
</head>
<body>
<div id="test">
Hi
</div>
<input type="button" value="Hide" onclick="'test'.arEl().hide('hidden');">
<input type="button" value="Show" onclick="'test'.arEl().hide('');">
</body>
</html>

Twey
06-22-2008, 06:05 PM
I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.

Trinithis
06-22-2008, 06:33 PM
String.prototype.arEl = function(){ return [document.getElementById(this)]; }

Never thought of this. Cool.

jscheuer1
06-22-2008, 06:55 PM
Never thought of this. Cool.

It could be much more powerful and/or specific, consider this mod (arEls):


String.prototype.arEls = function(){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
a[i] = document.getElementById(a[i]);
return a;
}

Which will return the same as the original, but can also return an array of multiple elements by their id's:


'test menu1 button2'.arEls()

Tabo
06-22-2008, 07:03 PM
Thanks for the help jscheuer1.


I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.

I was trying to imitate the features of prototype, as it saves lines and lines of code. I've made my own personal js framework which builds powerful widgets with just a few lines of code, however I have one problem and it is with Element.prototype.

In the same way prototype uses $("id").setStyle();

I would like to do $("whatever").buildWidget(); etc.

rather than $("whatever") = new Widget("more","parameters","needed","this","way")

Before posting I tried adding elements to an array every time my $("id") function is called, and doing things that way with no success.

Any idea how I can "use an accessor function"? I've never heard of it.

jscheuer1
06-22-2008, 07:09 PM
You can use the Array and/or String prototypes and bend them to your needs, ex:


String.prototype.widget=function(){
var el = document.getElementById(this);
do whatever to el here;
}

Usage:


'id'.widget();

Tabo
06-22-2008, 07:15 PM
You can use the Array and/or String prototypes and bend them to your needs, ex:


String.prototype.widget=function(){
var el = document.getElementById(this);
do whatever to el here;
}

Usage:


'id'.widget();
I know I'm being fussy, but is there no way to use $("whatever"); (where $() returns document.get...

Trinithis
06-22-2008, 07:16 PM
Things like Prototype's $ function are accessor functions. They grab things. In addition, the $ function adds functionality to the things it grabs.



function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}

See the highlighted code? That is where it extends the data. In this way, you can transparently add methods to elements in a way similar to that of Element.prototype. All you have to do is guarantee that you use $ when you grab an element (directly or indirectly).

BTW, what exactly is a widget?

Tabo
06-22-2008, 07:20 PM
widget?

<input type="text" id="input" ... />

<script>
lEvents.onwhenready=function(){
$("input").widget("spinbox","...")
}
</script>

Changes existing things to make them better... I don't know if it's a widget but I call them that

jscheuer1
06-23-2008, 12:26 AM
The bottom line though, regardless of what you use - a function or a prototype - if you want to do anything other than the default action, parameters will be involved in one way or another. So using a prototype really doesn't save you anything in and of itself. How well your code is written, and how well it anticipates your typical use - those are the things that will result in savings, as far as typed characters go. However, typing things out is often preferred as it leaves a clue as to what the thing actually does (or is supposed to do, at least). The bytes used in such an exercise are so trivial as to not matter at all. What might matter is the machine efficiency of the code once it gets to the execution phase, and this will vary by OS and by browser, but certain generalities may apply.