Question

这是表单的HTML。

function handleSubmit(form) {
  noun1 = form.querySelector('input[name=noun1]').value;
  noun2 = form.querySelector('input[name=noun2]').value;
  adjective1 = form.querySelector('input[name=adjective1]').value;
  adjective2 = form.querySelector('input[name=adjective2]').value;
  verb1 = form.querySelector('input[name=verb1]').value;
  verb2 = form.querySelector('input[name=verb2]').value;

  return false;
}

这是我按下按钮时运行的功能。变量是在此函数之上声明的全局变量，没有值。例如var noun1;

div

有没有更好的方法可以将表单输入写入我的全局变量以便以后写入网页？

Answer 1

是的，更好的选择是你可以通过使用它来使用命名空间，你可以避免全局变量。

var formVal = formVal ||{};

function handleSubmit(form) {
  formVal.noun1 = form.querySelector('input[name=noun1]').value;
  formVal.noun2 = form.querySelector('input[name=noun2]').value;
  formVal.adjective1 = form.querySelector('input[name=adjective1]').value;
  formVal.adjective2 = form.querySelector('input[name=adjective2]').value;
  formVal.verb1 = form.querySelector('input[name=verb1]').value;
  formVal.verb2 = form.querySelector('input[name=verb2]').value;

  return false;
}

或者如果你正在处理全局变量，你应该将代码包装在一个函数中有一个轻微的性能优势，因为在本地范围内查找更快，而不必将范围链带到全局范围

(function(window,undefined){
//your code
})(window);

Answer 2

所有已命名的表单控件都可用作表单的属性。此外，每个表单都有一个elements集合，它是表单中的所有控件。因此，您可以迭代所有控件并按照您的意愿处理它们，例如

// In global scope
var global = this;

function handleSubmit(form) {
  var control, controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    if (global.hasOwnProperty(control.name)) {
      global.name = control.name.value;
    }
  }
}

然而，这非常危险。如果任何表单控件的名称与全局/窗口对象的标准属性相同，则它将覆盖它（例如 name ）。将值存储在对象中会好得多，所以你可以这样做：

var global = {noun1:'', noun2:'', adjective1:'', adjective2:'', verb1:'', verb2:''};

但也许为对象指定 global 以外的名称。此外， name 属性不是唯一的，因此您应该处理控件具有相同名称的情况（例如单选按钮）。

但更好的是再给出你想要处理特定属性值的控件，比如说一个类。然后你可以测试这个类，并用控件的值做任何事情。

将表单输入写入全局变量的更好方法是什么？

2 个答案: