1

I'm developing a simple website with a few pages and some javascript (jQuery) scripts. For the CSS I used a single .css file with all the css for every page, and I thought to do the same for the scripts. So in the head of my pages I have this: 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="scripts.js"></script>
<link href="CSS.css" rel="stylesheet" type="text/css">

In this site don't use much javascript, for example in the home page I have only a sort of slideshow with a simple continuous sliding background that I made in this way:

var bgpos=1
function slide() {
$("div.slideshow").css("background-position","0px "+bgpos+"px")
bgpos++ 
}
setInterval(function(){slide()},35)

I have also a little javascript used in other pages, but I was wondering if it's a good practice to have all the scripts in a single file linked to every page. Here's the main question I was thinking about: if I use that file for every page, will the code above run uselessly in another page without a div.slideshow?
What's the best way to solve this?
I like the fact that the javascript is in a different file from the html, but maybe it's better to put these scripts directly in the head.

Lorenzo Rossi
  • 613
  • 1
  • 8
  • 18

5 Answers5

2

It is a good practice to bundle/minify your scripts in a production environment. However, in development, it's recommended to keep them as maintainable as possible. Having a development version of a script file is fine as long as the file isn't too large and the code is modularized. Once your scripts begin to get too large, it'd be prudent to split them out into functional modules. Let your bundling process worry about combining files for the production scenario.

Alex
  • 34,899
  • 5
  • 77
  • 90
1

In production it's very good practice to keep all files in one minified file. Thanks to this browser asks server for one file instead of doing many pointless requests. But in development environment you can have as many files as you need to have.

Damian Drygiel
  • 17,900
  • 4
  • 35
  • 28
1

For this case specifically, I would put the function in another file, then the setInterval call on the page where you need it. The function is just a definition, so even if that file is included on another page, the function won't "run uselessly" if it isn't called.

CDspace
  • 2,639
  • 18
  • 30
  • 36
0

you can check for the existence of the element you're manipulating so that you don't run all the code if the element doesn't exist in that page:

if($("div.slideshow").length>0){
    //setInterval goes here
}
innocuo
  • 114
  • 1
  • 5
0

You have two questions here.

I. Your main problem isn't answered by answering your question! Your problem is your current code!.

  1. You setInterval runs even if, your don't have a .slideshow element
  2. Your code doesn't let you have more than one slideshow on a page.
  3. Your current code let you ask, wether you should split your JS into fragments, which means your code isn't good, because it dictates you concatting/minifying process

It is good programming style to think in widgets/modules, which can have as many "instances" as you want. There are many ways to accomplish this with JS. One simpel way is to use a closure. Rewrite Your code to something like this:

$(function(){
    $("div.slideshow").each(createSlide);
});

function createSlide(){
    var slideElement = $(this);
    var bgpos = 1;
    setInterval(function slide() {
        slideElement.css("background-position","0px "+bgpos+"px")
        bgpos++ 
    }, 35);
}

Now your code only runs if .slideshow exists + you can have as many slideshows on one page as you want, without creating a global bgpos var. This is simple and nice technique, your code is simply wrapped by a function, which serves as a normal module wrapper, what happens in this function stays in this functions :-D

II. Split vs Concat

It is generally accepted, that you should concat your scripts into one file to minimize requests and speedup pageload. Something most people don't know about, is that this rule was established before 2006 and browsers changed and improved a lot since than. Concatination into one JS file might be still good for the total pageload, but it also means loading the hole JS takes longer than loading JS, if it would be seperated into 4 parts (4 parts can be loaded in parallel, which is faster, but also means, that other files have to be queued to be downloaded). But here is the big question: Is it important, that your JS for your stage carousel should be loaded as soon as possible or do you want to load the pictures near the bottom of your page before. From my testing it is often better to have multiple JS files (3-8 depending on size of each). In short: You should concat small files and split large and important files. But something important, this is not an excuse for not having a concat/build script and to load 6-8 tiny little JS files...

alexander farkas
  • 13,754
  • 4
  • 40
  • 41