javascript - 减少特定用例对 Javascript 代码中全局变量的依赖

Question

我正在获取通过 HTML 输入元素选择的图像文件，并对其执行验证/调整大小工作。这包括确认 mime 类型和减小尺寸(如果它们很大)。请注意，当用户通过浏览按钮选择图像时，我就开始执行这些检查。我不会等待用户实际按下提交。

图像经过验证后，我将其放置在名为 final_img 的全局变量中。

最后，如果用户按下submit，我就会从 final_img 检索数据，并利用 Ajax 请求将其发送。

我的问题是:如果用户打开了多个窗口，这样的设置能否正常工作？如果不是，我该如何调整此模式以确保在打开多个窗口时通过 Ajax 发送的图像负载不会混合？

我怀疑，由于我将处理后的图像存放在全局变量中，多个窗口操作会导致每次覆盖所述全局变量，而不是单独维护每个窗口的完整性(这就是我想要的)。请指教。

<小时/>

我的 img 处理代码如下所示:

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;
}

我的 Ajax 请求如下所示:

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);
}

我喜欢这种设置在用户必须按提交之前启动验证的方式，只需选择一个文件即可。但是，我确实想确保多个窗口不会弄乱东西，因此需要专家的帮助。提前致谢。

注意:出于此问题的目的，请坚持使用普通 JS。我是一名服务器端开发人员，正在学习 JS 基础知识，不想过早地转向 JQuery。

Answer 1

每个窗口都有自己的全局变量，除此之外，每次刷新浏览器也会清除所有全局变量。除非您将它们存储在本地存储或#params 等中。

但是 Javascript 全局变量的好处很少需要。

如果你将所有函数放在另一个函数中，JS 就会有一个叫做闭包的东西。

例如。

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

在上面的 global1 中，仅对其中声明的函数是全局的。

您甚至可能会看到这样的构造..

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

基本上上面只是创建一个匿名函数，基本上是一个未命名的函数，然后执行它。这甚至可以防止名为 run 的函数出现在全局中。