JavaScript 对象扩展 div

Question

由于我在 Java Swing 中已经习惯了它，我尝试创建一个可以添加到文档本身的 JavaScript 对象。它应该类似于：

var customDiv = new MyDiv();
document.appendChild(customDiv);

在对象的构造函数中我会尝试类似的东西

function MyDiv() {
   this.innerHTML = "test";
}

以及对象的其他内容。

那么是否有可能使用 JavaScript 以这样的方式创建网站，或者您如何解决这样的问题？

（我想创建元素，它是一个对象，并且可以自己处理所有事情，例如处理事件侦听器，并且可以添加到文档中。）

Answer 1

您可以，但类似于 Java Swing 方法接受 JPanels 或其他 Swing 组件的方式，类似 appendChild 的函数接受 Node 对象。你正在向appendChild 发送一个函数，它怎么知道如何接受它？

按照您描述的方式创建网站的示例：

var myDiv = document.createElement('div');
myDiv.id = "mydiv";
var myTextbox = document.createElement('input');
myTextbox.type = 'text';
myTextbox.value = 'some value';
myDiv.appendChild(myTextbox);
document.body.appendChild(myDiv);

因此，您创建单独的 DOM 元素并拥有对它们的引用，类似于创建 Swing 组件的实例。这些元素可以是divs 之类的东西，可以使用类似于JPanels 或input，类似于JTextFields。然后您使用这些引用将它们组合在一起以创建一个 GUI。

为了尝试说明 document.createElement 的工作原理，因为您在 cmets 中似乎仍然感到困惑，请将其与这样的 Java 方法进行比较（仅供参考，它可能并不完全准确，因为我没有在而）：

JComponent createComponent(string componentType) {
  if(componentType.equals("JTextField")) {
       return new JTextField(10);
    } else if(componentType.equals("JFileChooser")) {
       // return filechooser
    } 
    //etc.
}

如您所见，调用createComponent 方法并为其提供所需组件的字符串值，将返回实际实例化的空组件。您没有为它定义任何构造函数。相反，你放置一个对它的引用，然后用它做任何你想做的事情。