On Jan 14, 8:01 pm, Margie Roginski <[email protected]> wrote: > As I've learned more about jquery/javascript, I've added more and more > jquery interactive widgets to my app (which is sort of like a ticket > tracking app). I'm wondering if having too many .js files is a bad > thing (or a good thing)? > > Here's an example to make my question more understandable. I have > form similar to the admin changelist form, where the user views all of > their tasks. Each task has a lot of info available but I don't want > it to display it all in the form itself. For example, a task has a > "result" field, and instead of just rendering the result field (which > can be long), I provide a link that shows the date the result was > entered. When the user clicks on the link, they get a tooltip popup > that displays the result. > > My django widget looks like this: > > class ChangeList_DisplayResultWidget(ChangeList_ToolTipWidget): > > class Media: > js = ('js/jquery.js', > "js/cluetip/jquery.cluetip.js", > "js_custom/task_changelist_helpers/result_widget.js", > ) > > css = {'all' : ('js/cluetip/jquery.cluetip.css',)} > > The contents of result_widget.js is quite small, just this: > > $(document).ready(function() { > $('.changelist_result').cluetip({sticky:true, > closePosition: 'top', > closeText:'<img src="/site_media/img/admin/ > icon_deletelink.gif">', > showTitle:false, > leftOffset:'-300px', > activation:'click', > cluetipClass: 'jtip', > onShow: function(e) { $('#cluetip a').attr({'target': > '_blank'}); return true; } > }); > }); > > My question is - is it ok to have a lot of little .js files like > this? I find that keeping the .js code associated with my widgets in > separate files is very nice, because then if I reuse the widget on > some other page, it is well-encapsulated. IE, I get just the .js for > that widget, and no additional .js code. But since I have a very > interactive web app with a variety of widgets that have different > behaviors, I am finding that I have a lot of .js files getting > included. > > In my page that is similar to django's admin change list, I now have > 25 .js files. That includes various good-sized jquery packages > (jquery.js, autocomplete, datePicker, cluetip, filter), plus my > little .js snippets like that shown above, that use those packages, > plus some custom .js I have written, plus some code I use from the > admin app (core.js, actions.js, getElemetnsByselector.js). > > Sorry if I'm going into too much detail - just wanted to give folks a > flavor of what I'm doing. The users are very happy so I don't think > I'm going overboard on the UI side, but I'm just wondering if there > are issues associated with they way I am organizing the .js, or if > what I'm doing is a good way to go. > > I am doing client side caching of the files, and so far things seem > fast. I'd like to hear input from anyone with more experience on > whether this is a good organization or if there is some preferable way > to go. > > Margie
This isn't a Django question of course, but applies more generally to web apps. Best practise is not to have lots of small JS files. This is because most browsers limit the number of requests they can make to the same domain at once, so the files can't be loaded in parallel. What we tend to do is combine the files into a single one - there are various projects around that will do that for you. You can then include that combined JS file in your pages, rather than the 25 small ones. You may find it useful to test your site against the Yahoo YSlow analyzer, an add-in for the Firebug extension for Firefox. It gives lots of good advice about this sort of thing. -- DR.
-- You received this message because you are subscribed to the Google Groups "Django users" 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/django-users?hl=en.
