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
On Aug 23, 10:04 am, Johan Arensman <johanm...@gmail.com> wrote:
> 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 prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
