Javascript - Separating variables in different script

Question

I have few pieces of scripts written already. However, the variables inside different script will surely collide with each other upon import

Some of the examples from my scripts

The following is script A

<script>
     var vx = 0;
     var vy = 0;
     var d = null;
     function init() { ...}
     function CommentBox() { ... }
     CommentBox.prototype.create = function() { ... }
</script>

The following is script B

<script>
     var vx = 0;
     var vy = 0;
     var x = 0;
     var y = 0;
     var p = null;
     function init() { ...}
     function Ball() { ... }
     Ball.prototype.create = function() { ... }
</script>

Upon import, variables and methods will surely collide with each other.

Here's my question. Is it possible to separate them without the need to modify the name? I know there exists some design patterns but how can I achieve this?

I have been using prototype pattern for various "object" in these script but I don't know how to do it when I have to apply it to whole script. Also is it possible to have nested Prototype?

Learn to use closures to isolate variable scopes.

Dave
– Dave

2014-11-11 16:12:34 +00:00
Commented Nov 11, 2014 at 16:12 — Dave
– Dave, Commented Nov 11, 2014 at 16:12

Abdoul Sy · Accepted Answer · 2014-11-11 16:35:16Z

the scoping of variable (the context), in javascript is resolved through functions.

if you create a variable this way:

<script>
var a = 10;
</script>

In reality you implicitly do :

<script>
   window.a = 10;
</script>

What you can do to shield your variables from being read is to wrap your variables inside what we call an immediately invoked function expression (IIFE), which acts as a closure:

It's basically wrapping a function with parentheses, and treat the whole block as it it was the function name, we add parentheses to execute the code directly (otherwise you would have needed to call the function)

<script>

 (function(){
    var a = 10;
 })();

</script>

Creating the variable this way, instead of making your variable available through window. it will create the variable only inside the closure, and will live as long as the closure is alive in the object stack.

This way you can do something like this;

<script>
 (function(){
    var b = 20;
    var a = 10;
    window.c = 40;
 })();
</script>

If you want two closures to communicate, you can pass variables to window and grab it in an other closure

<script>
 (function(){
    var d = window.c + 5; //prints 45
 })();
</script>

In (a tiny) bit cleaner way, you can pass variables to the closure:

<script>
 (function(c){
   var d = c + 10; //prints 50
 })(window.c);
</script>

finally, all scripts injected inside your html, will have as main global variable window so that means that all these snippets above can either be in the same html file, or in separate js files, be careful about the order of inclusion of files though, for closures that use external variables, to have the variable instantiated in a file included before;

(PS: there are other practices, when sharing variables such as creating one variable attached to window and use this variable as main variable for your application (instead of using window))

something like this:

(function(){
  var window.App = {};
})();

which can be used somewhere else this way:

(function(App){
    App.test = "something";
})(window.App);//or App

I Hope this works;

Collectives™ on Stack Overflow

Javascript - Separating variables in different script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related