Question

我会对说明和示例代码有所了解，因为我打赌你们很多人对我的标题感到困惑（尽我所能）。

情况：我有一个表单，使用构造函数将输入数据提交给对象的新实例。

当前代码：

// Selectors
var submit = document.getElementById('submit-btn');
var formValues = document.getElementsByClassName('input');

// ** Task Object
function Task(arrayOfValues) {
  this.title = arrayOfValues[0].value;
  this.deadline = arrayOfValues[1].value;
  this.status = arrayOfValues[2].value;
}
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var newTask = new Task(formValues);  
}, false);

问题：将数组作为参数传递并手动分配每个索引对我来说非常脆弱。如果我要扩展表单的数据集合，我必须手动将每个新值分配为一个单独的变量。如果要迭代数组并动态地将值赋给构造函数中的变量，那么语法或模式是什么？先感谢您。非常感谢任何和所有帮助。

所需代码的示例

var formValues = document.getElementsByClassName('input');

// ** Task Object
function Task(arrayOfValues) {
  this.values = arrayOfValues;

  for (var i=0;i<this.values.length;i++) {
    var key = this.values[i].getAttribute('name'); 
    // This should be used with "this" to reference key ie. "this.title, this.deadline, this.status ect...

    var value = this.values[i].value;
    // This will be the value associated with each key reference ie. "this"

    return this[key] = value;
    // is this even possible ?        
  }

}
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var newTask = new Task(formValues);  
}, false);

Answer 1

我会分别取三个参数，让来电者找出哪一个是标题，截止日期或状态

function Task(title, deadline, status) {
  this.title = title;
  this.deadline = deadline;
  this.status = status;
}

现在，您的呼叫者可以通过使用ID，数据属性或他们想要的任何内容来确定哪个是哪个。

<input id="title-x"> <input id="deadline"> <input id="status">

submit.addEventListener('click', function(e) {
  e.preventDefault();
  var getVal = function(id) { return  document.getElementById(id).value; }
  var newTask = new Task(getVal('title-x'), getVal('deadline'), getVal('status'));  
}, false);

现在你的构造函数不依赖于数组中的顺序，甚至不依赖于它们是DOM元素。

您可以始终签订合同，其中特定输入通过数据属性

映射到任务字段

<input data-task-field="title">
<input data-task-field="deadline">
<input data-task-field="status">
<input data-task-field="newField">

/**
 * @param {object} taskDescription 
 * @param {string} taskDescription.title
 * @param {string} taskDescription.deadline
 * @param {string} taskDescription.status
 * @param {string} taskDescription.newField
 */
function Task(taskDescription) {
  this.task = taskDescription;
}

submit.addEventListener('click', function(e) {
  e.preventDefault();
  var tasks = document.querySelectorAll('input[data-task-field]');
  var taskSpec = {};
  for (var i=0; i < tasks.length; i++) {
    taskSpec[tasks.getAttribute('data-task-field')] = tasks.value; 
  }
  var newTask = new Task(taskSpec);  
}, false);

Answer 2

只需使用表单元素的名称作为对象中的属性名称。

function Task(arrayOfValues) {
  for (var i=0;i<arrayOfValues.length;i++) {
    var key = arrayOfValues[i].name;
    var value = arrayOfValues[i].value;
    this[key] = value;       
  }
}

不要在循环中使用return，这将在处理数组中的第一个元素后结束构造函数，并忽略其余元素。

Answer 3

我会使用关联数组 -

http://www.w3schools.com/js/js_arrays.asp

var assArray = [];
assArray["title"] = document.getElementbyID(......)

这使得您的数组在语义上有意义并且不那么脆弱。如果您扩展表单并不重要，只要您不更改名称，它就会继续有效。

这也意味着每次展开表单时都不必更改构造函数的调用签名，只需要更改正文以处理数组中的新元素（或者不是，就像你一样所以选择）。

迭代HTMLcollection以动态定义构造函数中的值？

3 个答案: