CODEWITHSUNDEEP
javascriptjqueryhtml
FatDogMark
FatDogMark

Reputation: 1205

How do external JS actually loaded into html?

I don't know am I doing right or wrong, my understanding is not quite clear. I am always making many external js files, and put them all in the header. All my external js files begin the same way like this:

$(document).ready(function(){
  //all the functions and variables
});

For example, if I have 3 external js files:

1.

$(document).ready(function(){
  var a = 1000;
  function run(){alert(a)};
  $('#btna').click(function(){run();});
});

2.

$(document).ready(function(){
  var b = 2000;
  function run(){alert(b)};
  $('#btnb').click(function(){run();});
});

3.

I never tried to use variables and functions that are in other JS files. Is it possible to get the a and b variable in the third JS file?

$(document).ready(function(){
  //is it possiblr to do this?
  alert(a+b);
  //or if I use run(), which methods will be called?
  run();
});

I am so confused... How does external JS actually load into html? Or I shouldn't put document ready in all files? Now I want to load scripts one by one after one is completely loaded, not having a bunch of things load at the same time. Therefore I have to make it clear first.

Upvotes: 3

Views: 217

Answers (5)

tvanfosson
tvanfosson

Reputation: 532465

Do NOT start putting variables in global scope. While this is sometimes necessary, you are much better off sharing modules between different scopes using something like http://requirejs.org. By using modules and objects, you limit the scope of the variable and reduce the chance of errors due to conflicts between variables defined in different files with the same scope. RequireJS also gives you a way to manage your dependencies, asynchronously load javascript files, and provides a clean way to optimize your scripts if desired.

From a learning perspective, as others have noted, the difficulties you are observing are due to the scope of the variables being local to the anonymous functions run on document ready. In JavaScript variables defined with var have scope local to the containing block of code. If you don't define the variable using var then it is scoped globally. Using global scope should be avoided to reduce the chance of accidental reuse of a variable in multiple locations. A good rule of thumb is to limit scope as much as possible, defining it local to where it is used. If a variable must be shared globally, you should probably define it as a property of an object and share the object globally. While the object is shared globally, the object context functions as the scope of the variable (like a namespace) making it less likely that if you will accidentally reuse it somewhere else for a different purpose.

For example:

<script type="text/javascript">
     var globalConstants = {
          a = 5,
          b = 10
     };
</script>

Then you can later refer to globalConstants.a or globalConstants.b - this makes it less likely that you would accidentally repeat the use of a or b in separate scripts without knowing that they are, in fact, the same variables.

Upvotes: 2

Stefan Dunn
Stefan Dunn

Reputation: 5513

In the first declared Javascript file, do what popnoodles suggests.

You could alternatively add the following before any other js file include.

<script>
 var a;
 var b;
</script>

The global variables need to be declared at the top so they can be used by the JavaScript files which proceed.

Upvotes: 0

Jashwant
Jashwant

Reputation: 29005

Putting js code in separate files does not make any difference. You can think the resultant of these 3 files would be a single file having this code,

$(document).ready(function(){
 var a = 1000;
 function run(){alert(a)};
 $('#btna').click(function(){run();});
});

 $(document).ready(function(){
     var b = 2000;
     function run(){alert(b)};
     $('#btnb').click(function(){run();});
    });

 $(document).ready(function(){
       //is it possiblr to do this?
    alert(a+b); 
       //or if I use run(), which methods will be called?
    run();
 });

But in third snippet, its not possible to do a+b not because they are not in separate file but because a and b are defined on different functions. JS have function scope. As soon as the function is terminated, variables are destroyed.

If you want to use a+b just make them global (by excluding the var from them)

e.g. instead of var a = 1000, do a=1000

Upvotes: 0

epascarello
epascarello

Reputation: 207511

Each file is separate [they do not know any of them exist] so they would each file would need the document.ready if the script requires the document to be ready.

It is better to include the script at the end of the body and not in the head. Check out this question: Putting jQuery/javascript source pages before end of body tag

Now the fun thing is with your example, you will get errors since your variables are scoped locally. Because of the local scope, the variables a, b, and run will be undefined in the third file.

Upvotes: 0

Popnoodles
Popnoodles

Reputation: 28409

Above $(document).ready in the first file you include make the variables global

var a;
var b;

It makes no difference to the javascript whether you load it separately or as one file but it's normally a good idea to put script that's used frequently in one js file rather than loads.

Now I want to load scripts one by one after one is completely loaded, not having a bunch of things load at the same time.

...which will probably turn out to be slower because you're loading more.

Upvotes: 0

Related Questions