Sharing Javascript between salesforce lightning components

Hi Kumar,

Currently the recommended mechanism for this is to use a Static Resource and include it in any components that need to share the same JavaScript via ltng:require (loads the library once and only once similar to requirejs).

Hi Kumar,

Lightning Component Framework is built on OOPS concept, not exactly but somehow. So to answer to your question, you can reuse the functions of one component’s HELPER in another Component.

Lightning Component inheritance is similar to object-oriented inheritance in programming languages like Apex or Java.  When a sub component extends a super component it inherits the super component’s attributes, event handlers, and helper methods.  The controller methods of the super component can be called by the sub component but the documentation warns not to do that and suggests that it may become deprecated.  The recommended approach is to use the helper for any super component code a sub component needs to use.  Additionally, abstract components and interfaces can be created.

When you want to create a component that can be extended you must set a value of true for the extensible attribute of the aura:component. By default, components are not extensible, just like Apex classes are not. You must put {!v.body} inside your base component’s code. This will allow your base component to handle the events generated by Sub Components.

Super Component: Base.cmp

<aura:component extensible=”true”>

{!v.body}

</aura:component>

Super Component Helper: BaseHelper.js

({
callServer : function(component, method, callback, params, setStorable) {
var action = component.get(method);

//Set params if any
if (params) {
action.setParams(params);
}

if(setStorable){
actions.setStorable();
}

action.setCallback(this,function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
// pass returned value to callback function
callback.call(this,response.getReturnValue());
} else if (state === “ERROR”) {
// generic error handler
var errors = response.getError();
if (errors) {
console.log(“Errors”, errors);
this.showToast({
“title”: “ERROR IN SERVER CALL”,
“type”: “error”,
“message”: errors
});
if (errors[0] && errors[0].message) {
throw new Error(“Error” + errors[0].message);
}
} else {
throw new Error(“Unknown Error”);
}
}
});

$A.enqueueAction(action);
},

/*
* This function displays toast based on the parameter values passed to it
* */
showToast : function(params) {
var toastEvent = $A.get(“e.force:showToast”);
if(toastEvent){
if(!params){
toastEvent.setParams({
“title”: “TOAST ERROR!”,
“type”: “error”,
“message”: “Toast Param not defined”
});
toastEvent.fire();
} else{
toastEvent.setParams(params);
toastEvent.fire();
}
} else{
alert(params.message);
}
},
})

Sub Component: SubComponent.cmp – Extends Base Component in Component Definition

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes”

extends=”c:Base” controller=”AccountController” access=”global” >

<aura:attribute name=”data” type=”Account[]”/>
<aura:handler name=”init” action=”{!c.doInit}” value=”{!this}”/>

<aura:iteration items=”{!v.data}” var=”acc”>
<p><lightning:formattedText value=”{!acc.Name}” /></p>
</aura:iteration>
</aura:component>

Sub Component Controller – SubComponentController.js

({

doInit : function(component, event, helper) {

helper.getAllAccounts(component, helper);

},

})

Sub Component Helper – SubComponentHelper.js

({

getAllAccounts : function(component, helper) {

//Calling base component’s helper method to call Aura Method

helper.callServer(component, “c.getAccounts”,

function(response){

if(response){

component.set(“v.data”, response);

//Calling showToast method of Base component

helper.showToast({

“title”: “SUCCESS”,

“type”: “success”,

“message”: “Account details are loaded”

});

}

});

},

})

This is how you can share the same code between multiple components and avoid boiler plate codes.

Few Important Points :

• Attributes of the component markup, Controller and Helper methods gets inherited and can be used by Sub Components. Along with these, events are also get inherited which can be handled by both Base and Sub Components.
• You must make your base component, either abstract=true or extensible=true.
• Your Base component markup must include “{!v.body}”

Hope this will help.

Thanks