Require.js how to deal with global variables?

Question

I'm trying to modularize a JavaScript app using Require.js. I'm trying to figure out how to deal with global variables that are used in the app. Everything I read says that one of the points of Require.js is to get rid of global vars. Anyways I have a interactions like this:

function myFunction()
{
  // Access some dynamic variables here
}

$('#myButton').on('click', myFunction());

mySettings = {};

$('#myForm').on('submit', function()
{
  mySettings.someSetting = "someValue";

  $.ajax(....) // Send the mySettings to some PHP script
}

So to sum up, the app is interactive and several controls and things users do on the page have to have access to the globally accessible variables and values and it has to be able to interact and do stuff with them.

Without global variables, how do I do this?

score 0 · Answer 1 · edited May 23 '17 at 10:25

Check out this answer first

You need to create a singleton in your settings.js file like this:

(function(){

    define([], function(){

        var settings = {

        };

        return {
            GetSettings: function() { return settings; }
       };
    });

})();

Then include it in your modules like so

define(['./settings'], function(settings){

    var mySettings = settings.GetSettings();

});

However! I would recommend using a framework like Angular, Ember or Durandle - They provide much better ways of handling this type of situation

Louis · Answer 2 · 2014-02-09T02:47:26.647

0

Create a settings module:

define(function () {
     return {
         settingA: "some value",
         settingB: true,
         settingC: {a: 1, b: 2, c: 3}
     };
});

If the settings module is meant to be used globally, I'd make it available under the name settings rather than use relative paths. So I'd put this in the RequireJS configuration:

paths: {
    "settings": "path/to/the/actual/settings"
}

Then require it like this:

define(["settings"], function (mySettings) {
    function myFunction()
    {
      // Access some dynamic variables here
    }

    $('#myButton').on('click', myFunction());

    $('#myForm').on('submit', function()
    {
      mySettings.someSetting = "someValue";

      $.ajax(....) // Send the mySettings to some PHP script
    }
});

This is the basic way to do it.

edited Feb 09 '14 at 02:47

answered Feb 09 '14 at 02:06

Louis

146,715
28
274
320

What if different events on the page need to process the settings different ways? Maybe a button click triggers ajax to send the settings somewhere. Maybe some other element on the page does something completely different with the same settings values. Do I have to have a different module for every different action that needs to happen? – Jake Wilson Feb 09 '14 at 02:33
Also, where does the above define need to go with respect to the onclick event (or whatever interactive event that uses it)? Why is it define() instead of require()? – Jake Wilson Feb 09 '14 at 02:33
Answering your questions in order... 1. I read nothing in what you describe that would mandate using different settings modules for different actions. 2. I'll edit the answer. 3. I've assumed that the code in your question would be in a module. It would work just as well with `require(["settings"], function (settings) {`. – Louis Feb 09 '14 at 02:44
Okay that is making more sense now. Thanks – Jake Wilson Feb 09 '14 at 03:35

Require.js how to deal with global variables?

2 Answers2