CODEWITHSUNDEEP
javascript
Hassan Baig
Hassan Baig

Reputation: 15824

Reducing reliance on global variable(s) in Javascript code for a specific use-case

I'm taking an image file selected via an HTML input element and performing validation/resizing work on it. This includes confirming the mime type and reducing dimensions (in case they're huge). Note that I start performing these checks the moment a user selects the image via the browse button. I don't wait for the user to actually press submit.

Once the image is validated, I park it in a global variable called final_img.

Finally, were the user to press submit, I retrieve the data from final_img and the utilize an Ajax request to send it on its way.

My question is: would such a set up work correctly if the user had multiple windows open? If not, how do I tweak this pattern to ensure the image payload to be sent via Ajax doesn't mix when multiple windows are open?

I suspect that since I'm parking the processed image in a global variable, multiple window operations would cause said global variable to be over-written each time, instead of maintaining each window's integrity separately (which is what I want). Please advise.

My img processing code looks like the following:

var final_img = null;

function process_user_file(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = process_image;
  reader.readAsArrayBuffer(file.slice(0,25));
}

function process_image(e) {
// validate and resize the image
  final_img = processed_img;
}

My Ajax request looks like so:

function personal_group_submit(e) {
  e.preventDefault();

  var form_data = new FormData();
  form_data.append("image", final_img, 'some_name');

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', e.target.action);
  xhr.send(form_data);
}

I like how this set up starts validation before the user has to press submit, upon them merely selecting a file. However, I do want to ensure multiple windows don't mess stuff up, so need help from experts. Thanks in advance.

Note: please stick to vanilla JS for the purposes of this question. I'm a server-side dev learning JS fundamentals and don't want to move on to to JQuery prematurely.

Upvotes: 0

Views: 39

Answers (1)

Keith
Keith

Reputation: 24191

Every window has it's own global, to add to this every refresh of your browser will clear all your global vars too. Unless you store them in say localstorage, or #params etc.

But the nice thing with Javascript global vars are very rarely required.

If you placed all you functions inside another function, JS has something called closures.

eg.

function run() {
   var global1 = "one";
   function action1() {
     console.log(global1);
   }
   action1();
}

In the above global1 is only global to the function declared within it.

You might even see constructs like this..

(function () { var global1 = "global1";  /*other code*/ })();

Basically the above is just creates an anonymous function, basically an unnamed function, and then executes it. This then even prevents the function named run appearing on the global.

Upvotes: 1

Related Questions