How to separate javascript into files without using global scope?

Question

I am loading separate .js files into my html page. These files use anonymous functions so that the global scope is not filled with global variables. For example: this is my 'utils.js' file:

(function(window){
   var Utils = {
       createURL: function() {
           console.log("creating url");
       }
   };
})(window);

My question: if I have several of these .js files, how can they reference each other without using the global scope? As it stands, I can only call this function from within the same utils.js file:

var myUtils = new Utils();

You sure you are not getting an error Utils is not a constructor with the code you have got? — manraj82
– manraj82, Commented Jul 3, 2013 at 12:44
You can use namespaces. Look here for details : kenneth-truyers.net/2013/04/27/… — Wand Maker
– Wand Maker, Commented Jul 3, 2013 at 12:45
You always will need to use the global scope somehow, otherwise you cannot set up any connection between the files. — Bergi
– Bergi, Commented Jul 3, 2013 at 12:53

mohkhan · Accepted Answer · 2013-07-03 12:46:48Z

2

You can create global modules and expose only the needed functions like this...

// In some JS file
var moduleX = (function(window){
   var Utils = function(){

   };

   return {
       "Utils" : Utils
   };
})(window);

// In a some other JS file
var util = new moduleX.Utils();

Btw, you cannot instantiate a JSON object(Utils in your case). So please change that to a function.

answered Jul 3, 2013 at 12:46

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

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

Comments

nicosantangelo · Accepted Answer · 2015-06-10 15:49:49Z

2

You can use a javascript loader like

If you don't want to use a loader, maybe you can reduce the global usage to the minimun using a design pattern like the mediator or module.

edited Jun 10, 2015 at 15:49

answered Jul 3, 2013 at 12:47

nicosantangelo

13.8k3 gold badges35 silver badges47 bronze badges

Comments

rusln · Accepted Answer · 2013-07-03 12:50:23Z

1

(function(window){
   var app = {};
    app.Utils = {
        createUrl:function(){}
    };
    window.app = app;
})(window);

and then you can work with the app like this :

app.Utils.createUrl();

answered Jul 3, 2013 at 12:50

rusln

1,2848 silver badges10 bronze badges

Comments

basilikum · Accepted Answer · 2013-07-03 13:04:18Z

1

If you don't want to use a third party tool, you can wrap everything into one module by using the following pattern:

//file1
var myModule = (function(window, that){

    var myVar = 1;

    that.myMethod1 = function(){
        console.log("i am module 1");
    };

    return that;
}(window, myModule || {}));

//file2
var myModule = (function(window, that){

    that.myMethod2 = function(){
        console.log(typeof myVar); //undefined
        that.myMethod1();   //i am module 1
    };

    return that;
}(window, myModule || {}));

This will ensure that you only have one single global variable. But, you will of course not be able to access local variables of another file.

edited Jul 3, 2013 at 13:04

answered Jul 3, 2013 at 12:51

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

1 Comment

Kokodoko Over a year ago

thanks. I've written it slightly differently, like this: window.MAINAPP = {}; and then, I attach every anonymous function to MAINAPP, like this: MAINAPP.myModule = myModule;

Collectives™ on Stack Overflow

How to separate javascript into files without using global scope?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related