• 0

javascript functions in separate .js files


Question

I'm having a slight issue...

I have a pretty big site, and separated my javascript into a few files (eg. basket.js, product.js and so on).

Each file is using jQuery so I have placed the onload at the start of the file.

So, say in product.js I call the ajax needed to add the product to the basket, and the callback is in the same file - all works well.

But it makes more sense to me to put the callback in the basket.js file. When I do this, it doesn't work.

Help?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Solved. I moved the function outside the "$(document).ready(function() {".

However, I assumed this would preclude me from using jQuery.

Link to comment
Share on other sites

  • 0

This site will have a LOT of functions, it's a large ecommerce site. All in one file suggests unmanageable to me?

Link to comment
Share on other sites

  • 0

You could compromise by keeping all your JavaScript in separate .js files, and then using anPHP/ASP/Whatever page to read in all of them together in code, which will download the whole thing as a single file. Best of both worlds!

Example HTML:

<script type="text/javascript" src="combinedjsfiles.php"></script>

In combinedjsfiles.php, you would have a set of include("myjavascript.js") calls, which you would then echo and would send the individual JS files as a single stream to the client.

NOTE: This is a theory, I haven't actually tried it, but I don't see why it wouldn't work, people do the same thing with stylesheets :)

Link to comment
Share on other sites

  • 0

The way I manage javascript libraries is to have separate files on the server that are split up in logical sections - then include them into the page by one request. For example,

The files I modify on the server would be;

example.com/products.js

example.com/basket.js

Then I'd have a dynamic file that automatically combines all the javascript files into 1 and make it accessible like this;

example.com/combinedJS

This could also have the benefit of speeding up page loads because users' browsers will need to make less requests.

In reality, I often have 2 dynamic files. 1 is the combination of scripts that are unlikely to change much - which is generally the main bulk of the scripts. The other is more 'experimental' scripts that are more likely to be modified. That way the bulky file gets cached by users' browsers and doesn't have to be re-downloaded every time I make an update to the scripts that are more likely to be updated. Once the 'experimental' script reaches a stage where it's no longer being updated, it gets put into the bulky file.

Link to comment
Share on other sites

  • 0

This site will have a LOT of functions, it's a large ecommerce site. All in one file suggests unmanageable to me?

Similar to what Majesticmerc/Mouldy Punk have said

What we do with lots of js files is have a batch script that grabs them all combines them into a single file and then uses a js packer to deliver a single compressed js file that your site can use

Link to comment
Share on other sites

  • 0

Solved. I moved the function outside the "$(document).ready(function() {".

However, I assumed this would preclude me from using jQuery.

I'm confused by this statement. How were you declaring them before? As functions declared within the jquery document.ready function, or as global functions? You can use jquery in your global functions, as the functions are not evaluated until they are called, which *should* be after Jquery has been loaded...

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.