2

I have posted the sample snippet of the problem which I am facing currently.
Description
I have created two aura components. Each aura component refers different static resources. Both static resources are having the same method name but parameter varies. I have created two tabs for each aura components.
Tab1 - Aura Component 1
Tab2 - Aura component 2
When I clicked 'Tab1' then method1 debug printed from TestSR1 (Static Resource)
When I clicked 'Tab2' then method1 debug printed from TestSR2 (Static Resource)
When I again clicked 'Tab1' then method1 debug printed from TestSR2 (Static Resource)
I am unable to rectify why TestSR2 debug is getting printed.
What am I missing ? Please help.
Static Resource1 - TestSR1

(function(w){
    let utilMethods = {
        "method1":method1,
        "method2":method2
    };

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

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

    w.myUtil = utilMethods;

})(window);

Static Resource2 - TestSR2

(function(w){
    let utilMethods = {
        "method1":method1,
        "method2":method2
    };

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

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

    w.myUtil = utilMethods;

})(window);

Aura component1

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
    <ltng:require scripts="{!$Resource.TestSR1}" />
    <ui:button label="Do job" press="{!c.doJob}"/>
</aura:component>

controller Js:
 doJob : function(cmp){
        console.log('doJob called');
        myUtil.method1(); 
        myUtil.method2(); 
 }

Aura component2

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <ltng:require scripts="{!$Resource.TestSR2}" />
    <ui:button label="Do job" press="{!c.doJob}"/>
</aura:component>

Controller Js:
({
    doInit : function(component, event, helper) {
        console.log('doInit called');        
    },
    doJob : function(cmp){
        console.log('doJob called');
        myUtil.method1('test str'); 
        myUtil.method2(); 
    }
})
4

All components in the same namespace (e.g. c or mynamespace) share the same window, so anything you put on that object is shared across all components in that namespace. That object is essentially the "global scope" for that namespace.

Either name the objects differently, or the methods differently. Note that your static resource code will overwrite the entire myUtil object, since it refers to the same global variable. Here's one solution:

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

    function method2(){
        console.log("method2 called");
    }
    w.myUtil = Object.assign(w.myUtil || {}, { method1, method2 });
})(window);

(function(w){
    function method3(str){
        console.log("method3 called"+str);
    } 

    function method4(){
        console.log("method4 called");
    }
    w.myUtil = Object.assign(w.myUtil || {}, { method3, method4 });    
})(window);
1
  • thank you so much. It worked.
    – Jerry
    Oct 26 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.