dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
1101
share rss forum feed


Clever_Proxy
Premium
join:2004-05-14
Villa Park, IL

Adding Jquery elements to a site without making a mess

I'm starting to get my feet wet with JQuery. I work with PHP and now I'm adding yet another language to my project. It's starting to feel very convoluted and fragmented now that javascript is in the picture :/

I've been finding myself wanting to add a bit of JQuery to an element and when doing this, I just plop the script right underneath the element(s) I'm working with.

Are there any best practices when it comes to placing Javascript stuff on your site? I've heard some people say that all of the Javascript stuff should be called at the bottom of the site, but I've found myself running into issues with doing that with my current method of Javascript placement.


cowboyro
Premium
join:2000-10-11
Shelton, CT

1 recommendation

Placing javascript in the body will only work if there is no dependent resource (ex jQuery)... Externally referenced files *do* take some time to load and initialize, chances are that in a real-life environment the script tag will get executed before jquery is even loaded.
That being said place all the js code in a separate file (or in the head, not elegant) and only call functions after body onload is triggered.


JAAulde
Web Developer
Premium,MVM
join:2001-05-09
Williamsport, MD
kudos:3

1 recommendation

said by cowboyro:

Placing javascript in the body will only work if there is no dependent resource (ex jQuery)... Externally referenced files *do* take some time to load and initialize, chances are that in a real-life environment the script tag will get executed before jquery is even loaded.
That being said place all the js code in a separate file (or in the head, not elegant) and only call functions after body onload is triggered.

I may have misunderstood you, but in case I didn't I wanted to offer a correction:

Script tags are executed in the order they are found in the parsing of the document. They are done one at a time and block until finished. Thus, no matter where an external script is referenced by a script tag, it will be present and executed BEFORE any script below it in the DOM (whether internal or external) begins to execute.
--
d'Vinci Interactive | My Development Sandbox | LinkedIn Profile


JAAulde
Web Developer
Premium,MVM
join:2001-05-09
Williamsport, MD
kudos:3

1 edit

1 recommendation

reply to Clever_Proxy
The idea behind moving all script tags to the bottom of the document is due to the fact that script loading and parsing takes time, and the browser blocks during that time. By allowing the entire DOM and CSS to be present before referencing scripts, you can avoid some of the funky looking halts and stutters in the presenting of your page. Keeping progressive enhancement in mind with your addition of behavioral code (e.g. JavaScript) will ensure that the delayed load of JS doesn't cause any problems in functionality. All that said, different developers make different recommendations in this area. Reading up on front end performance will help you make your own decision on that matter. (Steven Souders' High Performance Web Sites is a good start)

As for organization, I understand the issue you're running in to. You probably have some components which you dynamically load into pages via PHP and don't know what to do about the fact that the JS would be ideally moved away form the markup in question, but a page may or may not have the need for that JS depending on whether the component loaded in the first place.

When I make a such component, I try hard to be very semantic in my markup, and make good use of the id and class attributes to denote certain markup blocks which have need for behavior binding. I then move all my scripts to the bottom of the page, starting with 3rd party support code such as jQuery.

After having loaded 3rd party support, I load in my own support libraries and APIs. This is code which does not actually do anything during load other than define the classes, functions, etc that I'll need.

Then I have my all my application code and UI bootstrapping code in external scripts and load those as well. The UI binding code is often a single file containing a series of checks for certain structures/classes/IDs in the DOM. If the code detects something it should run against, it does. jQuery is pretty good at helping with this part since you don't have to actually make a check as to whether something existed before running jQuery logic. For example

$('#foo').myPlugin();

In this case, if an element with id of "foo" does not exist in my document, the myPlugin method doesn't ever really do anything. So you can have your UI binding file look for as many things in the DOM as needed, running things when appropriate, without a lot of messy checks. The only precaution to this approach is that you should use efficient selectors and query caching to avoid long execution time of the UI binding file.

--
d'Vinci Interactive | My Development Sandbox | LinkedIn Profile


Clever_Proxy
Premium
join:2004-05-14
Villa Park, IL
said by JAAulde:

You probably have some components which you dynamically load into pages via PHP and don't know what to do about the fact that the JS would be ideally moved away form the markup in question

Exactly!

Thanks for the killer pointers guys!