How do I call functions loaded from a Static Resource JavaScript file?

I’d like to put some shared Javascript to Resource file to reuse it between several components. This Javascript is general purpose set of utility functions.
However, functions from my resource file are not available from the Components.
Static resource (named TestScript):

function helloWorld() {
     return 42;
}

Component:

<ltng:require scripts="{!$Resource.TestScript}"
<ui:button label="Do job" press="{!c.doJob}"/>

Controller:

doJob: function(cmp, event, helper) {
     var i = helloWorld();
     // failed with Uncaught ReferenceError: helloWorld is not defined
}

I don’t like to use

<ltng:require scripts="{!$Resource.***resourceName***}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />

because my static resource is a set of functions and I’d like just use them as functions later in my controllers. How can I achieve that (if possible)? If not, what’s the suggested solution?

Answer

you could attach your utility methods to the global window object(SecureWindow) and use it in your controller.

Static Resource: TestScript

(function(w){
    "use strict"; //Optional because LC on LockerService active runs in strict mode

    var utilMethods = {
        "method1":method1,
        "method2":method2
    };

    function method1(){
        console.log("method1 called");
    } 

    function method2(){
        console.log("method2 called");
    }

    w.myUtil = utilMethods;

})(window);

Component:

<ltng:require scripts="{!$Resource.TestScript}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
<ui:button label="Do job" press="{!c.doJob}"/>

Controller.js:

doJob : function(cmp){
     myUtil.method1(); // Print method1 called
     myUtil.method2(); // Print method2 called
}

Attribution
Source : Link , Question Author : Mike Raven , Answer Author : Praveen

Leave a Comment