ansaurus

Question

Keeping my jQuery code away from the html files.

Answer 1

+7 A:

1. Absolutely.

Just add a script reference to your html like this:

<script type='text/javascript' src='js/yourfile.js'></script>

Then just start your .js file with

jQuery(function() {
  foo;
  ...
  bar;
});

or any other shortcut ways of starting the jQuery code block.

2. You should run your scripts through something like Minify before sending them off to the user. This will combine the files and pack them in nicely, so that they take up less space.

Artem Russakovskii 2009-06-18 16:34:17

thanks for ur advice, will try Minify for sure.

ca_in_UK 2009-06-19 08:33:33

Answer 2

+1 A:

I think worrying about server trips for javascript includes is premature optimization. Do you have any evidence that these pages are loading slowly? The browser should be caching the javascript files.

If you do have evidence that this is a problem, you could

-combine the jquery code and any plugins into one file
-write an .net content handler to do this for you (probably overkill)

Then you can add a custom js file per page to handle page specific properties.

Tim Hoolihan 2009-06-18 16:36:00

Thanks Tim,all your answers have given me great guidance and insight.

ca_in_UK 2009-06-19 08:32:45

Answer 3

+1 A:

You can most definitely put your document.ready and all other JavaScript code in an external file.

Typically I have 2 calls - one for jQuery itself, and one minified global.js file that combines and minifies all of my individual files.

Personally, I like to use front end blender for this, but there are many other options available as well.

Mark Hurd 2009-06-18 16:37:46

Thanks Mark,Will try front end blender and minify as was suggest by Artem

ca_in_UK 2009-06-19 08:31:23

Answer 4

+1 A:

there's nothing wrong w/putting the document.ready call in an external file. in fact, it's what i do to separate my js from my html. if you're concerned about certain functions running on certain pages, you may sift through them with a

var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
    //do something for this page only
}

or you can just include certain files only on certain pages.

Jason 2009-06-18 16:43:34

Thanks Jason,Like your suggestion about the logic about the page specific code seperation

ca_in_UK 2009-06-19 08:30:51

i use it :) works very well for me! a good way to quickly figure out exactly what page you're on is to do something like alert(path);

Jason 2009-06-19 08:48:29

Answer 5

+2 A:

Using $(document).ready () in an external javascript file is fine - it will work exactly the same :) In fact - not only will it work, but it is good practice as it helps to seperate the content (HTML) from the behaviour (Javascript).

In response to your section question - you can combine all of your plugins into a single javascript file and link to that one inside the <head>. You could also try minifying the scripts, although this is normally a bit overkill until the site goes live.

When I use jQuery, I normally use this kind of structure:

<html>
  <head>
    <!-- html tags such as title, link, meta etc -->
    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript" src="/path/to/plugin.js"></script>
    <!-- more plugins included if required -->
  </head>
  <body>
    <!-- html here -->

    <!-- script is the last thing before the ending body tag (increases performance) -->
    <script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
  </body>
</html>

slightlymore 2009-06-18 16:45:35

Hi thanks for the great tips you included in ur answer. I especially like the performance tip about including the script at the end of the body. I just want to clarify one thing. When you state that to combine all the plugins in one file does that mean to merge all the plugins code into one file instead of seperate js files (plugin1.js, plugin2.js..)? Many thanks

ca_in_UK 2009-06-19 08:29:58

You're correct- I was talking about taking the code from plugin1.js, plugin2.js etc and putting it all into a single javascript file (I call it plugins.js) - so in my example above, I would have all of the plugins in the single file plugin.js

slightlymore 2009-06-20 11:17:59

ansaurus

tags:

views:

answers:

Keeping my jQuery code away from the html files.

related questions