由于我习惯使用Java Swing,我尝试创建一个可以添加到文档本身的JavaScript对象。它应该看起来像:
var customDiv = new MyDiv();
document.appendChild(customDiv);
在对象的构造函数中,我会尝试像
这样的东西function MyDiv() {
this.innerHTML = "test";
}
和对象的其他东西。
用JavaScript可以用这样的方式创建网站,或者你如何解决这样的问题呢?
(我想创建元素,这是一个对象,并且像处理事件监听器一样自己做所有事情,并且可以添加到文档中。)
答案 0 :(得分:0)
您可以,但类似于Java Swing方法接受appendChild
或其他Swing组件的方式,像appendChild
这样的函数接受Node对象。您正在将函数发送到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);
,它将如何知道如何接受它?
以您描述的方式创建网站的示例:
div
因此,您创建单个DOM元素并引用它们,类似于创建Swing组件的实例。这些元素可以像JPanel
一样使用,类似于input
或JTextField
,类似于document.createElement
。然后使用这些引用将它们组合在一起以创建GUI。
试图说明JComponent createComponent(string componentType) {
if(componentType.equals("JTextField")) {
return new JTextField(10);
} else if(componentType.equals("JFileChooser")) {
// return filechooser
}
//etc.
}
如何工作,因为你在评论中似乎仍然感到困惑,将它与这样的Java方法进行比较(仅供参考,它可能不是严格准确的,因为我没有使用Swing在一段时间内):
createComponent
正如您所看到的,调用方法{
"name": "my-website",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.1.0",
"@angular/compiler": "^2.1.0",
"@angular/core": "^2.1.0",
"@angular/forms": "^2.1.0",
"@angular/http": "^2.1.0",
"@angular/platform-browser": "^2.1.0",
"@angular/platform-browser-dynamic": "^2.1.0",
"@angular/router": "^3.1.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "^2.1.0",
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.20-4",
"codelyzer": "~1.0.0-beta.3",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
并为其提供所需组件的String值,将返回实际实例化的空组件。您没有为它定义任何构造函数。相反,你放置一个引用,并用它做任何你想做的事情。