Accessing global variables across javascript files

Questions
1

Is it possible to reference a global variable that has been set in an imported javascript file? If so how can the current value of such a variable be retrieved/referenced?

Context: New to F7 looking to port an existing SPA Cordova app from JQM to Framework7. The app currently has a large Javascript file (my.js) with several hundred functions and a number of global variables. While some of these global variables have static values, most are dynamic and will change depending on the functions called depending on user selections. (For JQM it also had an HTML file with 40+ “pages” to be dissected into separate view files and navigation routing handled via routes.js as indicated below for F7)

Here’s an example to explain the question:
Currently in my.js:
…
var gList = [ ]; // defined outside a function as a global variable
When various functions in my.js are called, gList is populated, modified and/or used across multiple pages

So in app.js of the Framework7 project:
…
let myJS = require(’./my.js’);
…
var app = new Framework7({
root: ‘#app’,
…
// App routes
routes: routes,
myjs: myJS,
})

var mainView = app.views.create(’.view-main’, {
dynamicNavbar: true,
domCache: true,
});

$$(document).on(‘app.Ready’, function deviceIsReady() {
mainView.router.refreshPage();
mainView.router.allowPageChange;
});

Question: Can the content of gList be referenced in app.js and if so how? If not, does it mean that the global variables and functions currently in my.js should instead be shifted into app.js (and my.js dropped)?

$$(’.myPO’).on(‘click’, function (ev) {
var firstVal = ? //< What is the statement required here to get the first value in gList i.e. gList[0]
var myPO = app.popover.create({
targetEl: ‘a.myPO’,
closeByOutsideClick: false,
closeByBackdropClick: false,
content: ‘

’+
‘
’+
‘

blah, blah, blah ’+firstVal+’ blah, blah,blah

’+
‘’+
‘

…

’+
‘
’+
‘</div’,
});
myPO.open();
});

In routes.js:
…
import Panel from ‘…/pages/panel.f7.html’;
import HomePage from ‘…/pages/home.f7.html’;
import AboutPage from ‘…/pages/about.f7.html’;
…

var routes = [
{
path: ‘/panel/’,
component: Panel,
},
{
path: ‘/’,
component: HomePage,
},
{
path: ‘/about/’,
component: AboutPage,
},
…
];

export default routes;

And in home.f7.html:

...
... <a href="#" class="link myPO”></a> ... </div> </div> </template>
2

You can define global variables in any place using:

window.someGlobalVar = 'value';

It will be available everywhere. But better setup F7 project with F7-CLI, choose webpack bundler and use JavaScript modules https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

1 Like
3

Thanks muchly for that - very helpful!
Have already got the project setup with CLI and webpack…
The app runs almost completely client-side for offline operability. Shall revisit the pros and cons of breaking the JS into modules - have been dealing with the upfront hit of the initial load for a while and there’s also benefit in being able to obfuscate the entire codebase in one hit.