JQuery, finding a smarter way to initialize

Question

I am looking for the best way to control the global initialization of components / plugins / widgets in a large project. It has many components that work with jQuery that I would like to initialize quickly and efficiently, and after cleaning the Internet, I really found myopic examples that are realistic / realistic on small sites.

Problem

I want to find a smart and elegant way to get rid of this:

$(function() { $('.widget-one').widgetOne(); }); $(function() { $('.widget-two').widgetTwo(); }); $(function() { $('.widget-three').widgetThree(); }); $(function() { $('.widget-four').widgetFour(); }); 

Now, before you delete me for this, let me say that I know that in most cases (but not all). .widget-one is a bad selector, since it will receive all elements in dom and check the class in older browsers.

The problem is that these widgets are not one-time, and I may not know about the existence of time ahead of time (generated in the presentation of the web application, perhaps 2-3 times based on the logic or the product cycle or something else).

So, the following solutions are missing:

 $(function() { $('#WidgetOne').widgetOne(); }); 

and

 <span id="WidgetOne_12345">...</span> <script type="javascript"> $(function() { $('#WidgetOne_12345').widgetOne(); }); </script> 

Thoughts

This is not a new problem. She has been around since day one. It still puzzles me how difficult it is to solve using jQuery even at this maturity level. Either that, or I'm missing something obviously obvious.

Unfortunately google-fu doesn’t do well on this issue, since everyone offers one of two things:

• jQuery .live() or .delegate() catch-all event handlers. It is just scary on a fundamental level. .delegate() not so bad, but this requires the plugin / widget / control / everything to be a fully event-driven event. This will work in many cases for sure, but not in others. He also does the following and organizes the code very complex. I won’t even go into .live() , for large complex sites, bubbling events is slow, and when you get enough components together, the list of queries that will correspond becomes large, making each click / focus / any event gradually slower overall for whole page.
• Work with plugins such as liveQuery , which is a very cool plugin, but it seems that it was apparently designed to solve another problem (the problem of the appearance of new elements by creating ajax / dom) and will continue to increase gradually than more requests to be checked.

Conclusion

There must be a better way, I know there must be one. I have exhausted my google fu on this subject and still cannot find ideas / concepts / examples / discussion that are newer than jQuery 1.3.2, or with a big picture. In an ideal world, this will not be a problem, because everyone will use smart browsers with modern standards and a decent javascript engine, and .class requests will not occupy eons and eons, but, unfortunately, this is not so.

I am looking for ideas on how to handle this by going through many SO questions similar to this, and many articles about various jquery methods. I feel that if the information is there, then it is buried under many false positives and the “101 best jQuery plugin” that appears in any search using jQuery. I know that someone there has encountered this predicament.

Ideas, links, examples, everything is welcome, there just has to be a better way.

Answer 1

just brainstorming from my head. I can come up with one thing that will reduce your selection and initialization time, but can be a compromise of pain during development. besides, you cannot really use parameters with this method, but if you have a situation similar to the one you described above, it may be worth it.

if you claim that each of your initializing elements has the same class (for example, a widget), you can create a single selector system for initializing your widgets.

structure the classes instead in your HTML:

 <div class="widget" widgetFunc="widgetOne"></div> <div class="widget" widgetFunc="widgetTwo"></div> 

and etc.

and your jquery initialization function will look like this:

 var $widgetInitializerElements = $('.widget'); $.each($widgetInitializerElements,function(){ var initialize = window[$(this).attr('widgetFunc')]; if(typeof initialize === 'function'){ $(this).initialize(); } }); 

so this will reduce your selection up to once and keep your jquery pretty clean. you just need to worry about all those HTML elements that may not be possible, and you will have problems if you need to add parameters to initialize calls: /

Answer 2

The first question to ask is: is there a real performance issue? That is, you have an unusable application now or you expect future problems. If so, correct the problem when it arises - it may turn out that there is a better use of your time. If so, did you actually compare to see where you are?

... I know that in most cases (but not all) .widget-one is a bad selector, as it will be in older browsers, it will get all the elements in dom and check the class.

It is true, but perhaps it is OK. If you see:

• http://www.quirksmode.org/dom/w3c_core.html

getElementsByClassName supported almost everywhere except IE8 and below. Yes, IE8 is still of great importance, but it changes quite quickly. There is a good argument that people who want to use complex applications should not use old browsers anyway. It just isn't worth your time.

jQuery.live () or .delegate () catch-all event handlers. This is just scary on a fundamental level.

I disagree (scary?), But publishing / subscribing might be the best model for a large application. I used this very successfully with Dojo in a complex user interface and there seem to be some useful plugins for jQuery (e.g. http://www.novasoftware.com/download/jquery/publish-subscribe.aspx ). This allows you to send a global event message without the overhead of delegation. Events are easily replaced with names to avoid conflicts in a large application. Yes, this event is managed, but it is important if you want to maintain performance in a large application.

In addition to the foregoing, the fastest way to improve class selectors is also to add a tag, for example:

 $('p.widget-one') 

instead

 $('.widget-one')