Call IIFE From Another Javascript File

Question

I have a file bg.js whose contents is simply an IIFE. I'd like to load this file/call the function in from another function in another file. Since the IIFE is anonymous (it is, right?) I can't call it by name. It seems I have to load the entire file so it executes immediately.

I've done searching and found many tutorials and documents about what an IIFE is, but nowhere had I seen how to execute one from another scope.

How do I call/load a javascript file that is an IIFE from another javascript file?

More Information The IIFE is loaded in the footer of my page. When I click a link to navigate, the header and footer scripts are not executed. The IIFE in the footer is responsible for setting the background image, so I need to get that function to execute in my perPageBindings()

What I think I need to do is invoke the IIFE from another function in the body which is being executed in perPageBindings()

Edit for clarity There are two options I am considering:

1. Simply move the script tag to the body from the footer; or
2. Give the IIFE a name so it is no longer anonymous and then call that named function from elsewhere

If 2 is a viable option then I think I will create a new question about converting and IIFE to a named function.

Answer 1

If you want to access something within that script, a function or a property, after it has been anonymously invoked, you'll need to expose some of the internals of that function to something that is accessible from global scope.

I'm not saying that you must have your function put a variable into global scope, although that is what many libraries do and is one of the paths that UMD follows if a CommonJS or AMD environment is not available.

You should look into the Revealing Module Pattern for a better perspective.

Consider the following code snippet:

(function(global){
    /*
     * This variable will stay "private" 
     * because it is scoped to the IIF
     */
    var someProp = "Hello World";

    /*
     * This property is effectively exposed 
     * because it is accessible through 
     * myLib.foxtrot below
     */
    var someOtherProp = "Hello to you too";

    var myLib = {
        foo: "bar",
        fiz: true,
        buzz: 1,
        foxtrot: someOtherProp
    };

    /*
     * myLib is now accessible through the 
     * global that we passed to the IIF below
     * at the point of calling with "window"
     */
    global.myLib = myLib;

}(window));

Answer 2

Seems like you want to define this function some where that makes it reusable. If you want to invoke from the footer wrap the reusable function call in an IIFE. That way its immediately invoked in the footer and calls your function but you can also call this function elsewhere.

Example:

JS:

function setBackground () {
    // sets background and can be called whenever
}

HTML:

<footer>
    <script>
        (function () {
            setBackground();
        } ());
    <script>
</footer>