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
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
