Question

我想知道是否可以在js oop中放置html dom引用。虽然在线有很多JS OOP教程，但我没有看到类似于我所指的内容。下面的代码就是我所指的。

var form = {
  fname : document.getElementById("fname").value;
};

例如，document.getElementById("fname").value是一个值为“jacob”的文本框。会form.fname = "jacob"？

这样可以吗？这是一种常见的做法吗？

Answer 1

如果在load事件之后创建了对象，则可以执行此操作，以便确保元素“fname”已初始化... 例如......

$(document).ready(function(){
   var form = {
     fname : document.getElementById("fname").value;
    };
});

如果你不想在这里使用jQuery是另一个例子...

window.addEvent('load',function(){
  //your object ...
  });

Answer 2

我不确定你在这里想要完成什么。如果您只需要检索当前在输入字段中的值，那么一次，那么这应该没问题。如果您希望form.fname的值在输入值更改时不断更新，那么您将不会看到这种情况发生。你需要一些与输入的change事件绑定的处理程序，或者你需要做更多这样的事情：

var form = {
  fname: function () {
    return document.getElementById('fname').value;
  }
};

// Retrieving
form.fname()

请注意，您现在必须调用fname函数，不能简单地将其称为form.fname。

如果你真的不想重新输入任何东西，可以这样做：

var fields = ['fname', 'lname', 'city', 'state'];
var form = {};
for (var i = 0, j = fields.length; i < j; ++i) {
  form[fields[i]] = function () {
    return document.getElementById(fields[i]).value;
  }
}

如果您向表单添加下拉列表等内容，则必须更加小心，因为他们的.value没有帮助，但如果更改名称，则不会重新键入名称

而且，如果我们真的想要它，你甚至不需要在获得值时输入名称：

for (var i = 0, j = fields.length; i < j; ++i) {
  console.log(form[fields[i]]())
}

这是有效的js oop吗？

2 个答案: