Migrating inline JavaScript to external files

Question

I have some inline JavaScript on several different pages like this:

$(function() {
   var myVar1 = ...;
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});

I would like to move them into an external script, which is the recommended way of deploying client-side JavaScript.

However, for each individual page, I have a different value for variable myVar1, so it seems like I have to create multiple very similar JS files because of this tiny difference. Is there any better way?

Curtis · Accepted Answer · 2013-03-27 15:20:36Z

2

You could store the variable in a relevant existing HTML element attribute, and retrieve it within the code:

<div class="myclass" data-var1="Page 1"></div>


$(function() {
   var myVar1 = $(".myclass").data("var1");
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});

Another solution would be to take myVar1 out of your function and declare it as a global variable in each page.

For example:

<script type="text/javascript">
  var myVar1 = 'Page1';
</script>
<script type="text/javascript" src="myscript.js"></script>

For clarification, "myscript.js" would be:

$(function() {
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});

edited Mar 27, 2013 at 15:20

answered Mar 27, 2013 at 15:02

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MLister Over a year ago

but that's gonna pollute the global variable space, which kinda defeats the purpose of making the closure?

Curtis Over a year ago

@MLister I've edited my answer to provide an alternative solution if you do not wish to use global variables.

Curtis Over a year ago

@MLister The purpose of your closure is to run after the DOM has loaded, as you are using shorthand jQuery $(document).ready(). But I appreciate global variables aren't always the neatest solution.

Collectives™ on Stack Overflow

Migrating inline JavaScript to external files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related