How to call common js code from component js file?
Hi everybody!
I have a location component by path:
/ui.apps/src/main/content/jcr_root/apps/test/components/global/header/location.
Under component directory I have a clientlibs folder with following properties and structure:
[cq:ClientLibraryFolder] - jcr:primaryType
- categories="[test.location]"
+ js.txt (nt:file)
+ js (nt:folder)
+ validation.js (nt:file)
Here is the content of the validation.js file:
(function($) {
console.log('test');
console.log(location.add(5, 5));
})(jQuery, location);
And I have a file called location.js (just an example) under :
/ui.apps/src/main/content/jcr_root/etc/clientlibs/test/common
directory:
[cq:ClientLibraryFolder] - jcr:primaryType
- categories="[test.common]"
- embed="[test.global, test.location]"
- dependencies="[cq.shared]"
+ css.txt (nt:file)
+ js.txt (nt:file)
+ css (nt:folder)
+ js (nt:folder)
+ location.js (nt:file)
+ a bunch of js files
Example of the content of location.js file:
var location = (function ($) {
function init() {
// some code...
}function add(a, b) {
console.log('a=' + a);
console.log('b=' + b);
return a + b;
}
return {
add:add
};
})(jQuery);
location.init();
So when I open the page and check browser console I see an error like this:
test
Uncaught TypeError: Cannot read property 'add' of undefined
at common.dd1dbfad04c7d50b4c3973155ce3fa63.js:7081
at common.dd1dbfad04c7d50b4c3973155ce3fa63.js:7082
It's happening because code from validation.js is higher than code from location.js in the compiled common.js file.
AEM version is 6.3.2.2.
So my question:
Is it possible to call some function from js file with common code inside js file related to component? If yes, how I can achieve that?
Thanks in advance!