Initializing Javascript in the Body

[launchoverit]

I’m curious what everybody’s opinion is about where to initialize your javascript. I’m using jQuery and a module pattern, and I’m starting to take this approach:

• Load all of the modules in one file at the bottom of the page
• Initialize modules as I need them in the body with <script> tags. Example:
  <div class="component-type-a" id="component-1234">
<h3>Component Title</h3>
<script>
$(document).ready(function(){
ComponentA.init('#component-1234');
});
</script>
</div>

This way, we can have our users add/remove components with the CMS, and the javascript for those components will only be run if the component exists on that page (rather than every module searching every page’s DOM for the necessary id’/classes).

I’m having a surprisingly hard time finding information/opinions about this online. I’d love to hear:

• Do you do things this way? If not, any particular reason?
• Is this a bad idea in any way? Will I encounter problems down the road?

Thanks!

[launchoverit]

Yeah sort of. I would phrase it like “I want certain JS to run only when that html is on the page.”

Here’s perhaps a more clear breakdown of the scenario:

• Our users can add/remove stuff to pages with the CMS, including components that we (the admins) build.
• Let’s say I build a little events list component that uses html, css and js.
• For the js, I’ll make a new module for it ala the revealing module pattern. Each of my modules have “init” functions just like in Chris Coyier’s example here.
• The js will be added to our big fat scrips.js file that’s loaded on every page.
• In the past, I’ve just run the init() function for all of my modules at the end of the scrips.js file. For the events component’s module, this means whenever any page is loaded it’s going to look through the DOM for #events-component to see if it should run all of the events component js. Likewise for all of my other components’ modules.
• My question is this: what if it doesn’t get initialized in scrips.js but instead is initialized with a script tag that’s included in the events component html? So when a user adds the component to a page, it will look like that code snippet I posted above, and the module doesn’t have to look through the DOM on every page to see if it needs to run or not.

Does that make sense? I have a strong suspicion there’s a term for this kind of thing or something obvious I should be finding via google, but so far it’s eluding me.

Thanks!

[shaneisme]

It sounds complicated enough to start digging into Websockets I think. Just have it listening constantly for additions or other changes and run the code that way.

Otherwise things will get out of hand quickly. That said, that’s a whole other ballgame if you’ve never gone down that road, but it might be worth researching to see if it will work for you.

[launchoverit]

Cool, thanks for the recommendation! Haven’t looked into websockets all in the past.

[launchoverit]

Thanks for the reply! I’m talking about static pages for the most part, but some of the components are ajax-y.

That’s an interesting approach, if I don’t end up using the script tags I might end up going that way. Thanks!

[Author]

Posts