Import javascript files when needed and global variables

Question

I am using an import function to import javascript files only when needed. My function looks like the following. They are in the main.js file and inside the jquery ready wrapper.

$(function() {
    function globaltrigger(){
        alert('');
    }

    function $import(src){
        var scriptElem = document.createElement('script');
        scriptElem.setAttribute('src',src);
        scriptElem.setAttribute('type','text/javascript');
        document.getElementsByTagName('head')[0].appendChild(scriptElem);
    }
});

Let's say we import a javascript file on a mouse click. $import('newfile.js');. However, this newly imported file is unable to access the functions in the main.js javascript file. For example:

// the following function is placed in the newfile.js file
$(function() {
    globaltrigger();
});

Any method to make this work?

That should work. Is globaltrigger() really in the global scope, or is it wrapped in window.onload or DOM ready? What error message do you get? — MrCode
– MrCode, Commented May 10, 2014 at 13:09
Are you calling the function after script is fully loaded. When you click the loading is async, so it might be the case that the file is not fully loaded and you are calling the function — coder hacker
– coder hacker, Commented May 10, 2014 at 13:10
@MrCode ReferenceError: globaltrigger is not defined in firebug. Ah, it seems to be wrapped in window.onload. Does $import work with onload? — pewpewlasers
– pewpewlasers, Commented May 10, 2014 at 13:13
Have you verified it's in the global scope? console.log( window.globaltrigger ); — MrCode
– MrCode, Commented May 10, 2014 at 13:20
You're rolling your own script loader but not using the one built into jQuery? api.jquery.com/jQuery.getScript — Lee Taylor
– Lee Taylor, Commented May 10, 2014 at 13:42

MrCode · Accepted Answer · 2014-05-10 15:15:58Z

1

Your problem is as I suspected, the globaltrigger() function is not in the global scope. It's inside the jQuery DOM ready function, so is not accessible from outside.

Move it into the global scope:

function globaltrigger(){
    alert('');
}

$(function(){
    // dom ready stuff
});

It's good practice to avoid polluting the global space with lots of variables and functions. You can store your functions/variables under an object which is a simple way of achieving namespaces.

var SomeApp = {};

SomeApp.globaltrigger = function(){
    alert('');
};

In the external JavaScript you can call it:

SomeApp.globaltrigger();

This is good because all of your code lives under the SomeApp object.

edited May 10, 2014 at 15:15

answered May 10, 2014 at 13:38

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

3 Comments

pewpewlasers Over a year ago

Yes, your logic sounds very reasonable. But is there any way of accessing inside the DOM ready without moving the globaltrigger()?

pewpewlasers Over a year ago

Looks good! One question though, performance wise is it better to have functions saved under the window object as the other poster (Amit Joki) has suggested or to have a different object like yours?

MrCode Over a year ago

Performance wise there will be no difference, but it's considered good practice to have your functions and variables under one global object because it avoids name collisions with other code, and if you want to distribute your code or publish it, doing this is a must.

Amit Joki · Accepted Answer · 2014-05-10 13:39:34Z

1

The DOM ready creates a closure, making your function limited to only that scope. You can declare your function to be global like this:

window.globaltrigger = function(){
    alert('');
}

Now the function is truly global and can be called by other scripts.

answered May 10, 2014 at 13:39

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

2 Comments

pewpewlasers Over a year ago

Okay this is one solution. Thanks!

Amit Joki Over a year ago

@pewpewlasers, glad to have helped ;)

Collectives™ on Stack Overflow

Import javascript files when needed and global variables

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related