Organizing my dom:loaded event

[Johan Arensman]

Hey guys,

I'm redesigning a template set for different kind of websites. In the past quite a lot of 'widgets' have been created in the form of prototype Classes and almost every widget works the same way:
1. get all elements with className 'x'
2. for each element: create a new ClassX
3. ClassX modifies the element or does something else with it

for example for a 'Tabs' class this piece of code is in the dom:loaded event:
$$('ul.tabs').each(function(list) { new Tabs(list); });

Now i'm fine with that for now but imagine to duplicate the same behavior for 8 other usages, so 8 other selections are made and JS code is executed for them.

I would like to know if there's any way to optimize the dom:loaded event. I'm not having any problems right now, it works just fine but I'm afraid that if more functionality is added that performance will become a problem.

One of my ideas was to combine the global element selectors into 1 selector and then apply the correct piece of code by checking if a certain class or attribute is present on the element like this:
$$('ul.tabs, div.map, input.placeholder, a[rel=external]').each(function applySomething(e) {
 // if element hasClassName('tabs') then apply tabs functionality etc..
 // more checking for classnames and attributes
});

Is this a good idea? Do I gain performance when doing this? Are there other ways to organize this?

All input welcome!

Greetings,
Johan

[Victor]

I think it will be slower than separate selectors:
1. Single complex selector will require additional time to parse and merge nodes into single result.
2. After that you will use additional checks - the same as in your selectors.

[Eric]

Hi,

It may be a little slower as says Victor.
However, you may try to use part of the class to identify a
"plugin"class and the other part for identifying the JS class to use.
Something like that:

$$("*[class^='plugin']).each(function(e) {
var jsClass = e.className.substr(6);
if(typeof(window[jsClass])=='function') new (window[jsClass])(e);
});

if you have an UL with class pluginTabs, it will make a "new Tabs(e)"
on it.

Note that the above code is not tested at all. You may need to found a
proper way to check if the class actually exists and you may need to
use another selector operator than ^= since classes are space
separated sets (sorry, I don't have time to check the documentation).

On a ground to earth approach, I'd continue doing what you're doing
right now.
Only difference perhaps is that I'd add to my plugin classes a static
method which do the selection and DOM update, so you can give an array
of class objects to your DOM init and invoke it.

Eric

[Johan Arensman]

Thanks for your input! I'm glad I wasn't totally messing this up, i'll have a look at the plugin idea Eric maybe i'll find some other usages for it.

Thanks all,
 Johan

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.