在 Javascript 中将 HTML 控件创建为类答案

【问题标题】：Creating HTML Controls as classes in Javascript在 Javascript 中将 HTML 控件创建为类
【发布时间】：2014-07-20 16:16:05
【问题描述】：

是否有指导将 HTML 控件创建为类并在 html 页面中使用它们的 JavaScript 教程？

我在互联网上进行了足够多的搜索，但没有产生任何结果。对于发布这样一个新手问题，我深表歉意。

【问题讨论】：

您必须更好地解释这一点。 “作为类的 HTML 控件”到底是什么？
您可能想查看Google Polymer，但在很大程度上，您今天的要求并没有真正令人满意且实用的方法。
例如，让我们采用一个我可以将它作为在某些 JS 文件中定义的类，如“TextBox”，并可以将其用作 var myTextBox = new TextBox() ; ??
没有。 Html 比那更详细一点。要弄乱 div、文本框等 HTML 元素，您需要研究 html 文档。
@DavidR - 你可以这样做，但你需要自己编写类来匹配你正在寻找的 mfc 或 qt 类型的抽象。

标签： jquery html oop javascript

【解决方案1】：

您的问题并不具体，但我会尝试向您指出一些我认为可能会有所帮助的方向：

聚合物 http://www.polymer-project.org/

一个框架来编写可重用的Web 组件。例如一个“Controlls”组件，只要写<custom-controlls></custom-controlls>
虚拟 DOM https://github.com/Matt-Esch/virtual-dom

在 javascript 中的 DOM 实现。

我认为第一个更适合您的用例。

【讨论】：

聚合物看起来最适合我的要求。非常感谢奥利弗！。

【解决方案2】：

你可以的。在您的 javascript 文件中声明输入变量。并像这样使用：

$(document).ready(function() {
var textbox = document.createElement('input');

var button = document.createElement('input');

    $('.first-name').html(textbox);
    $('.first-name').find('input').attr({'id': 'first-name', 'type': 'text'});

    $('.button-div').html(button);
    $('.button-div').find('input').attr({'id': 'save', 'type': 'button'}).val('Save');
});


<body>
  <div class="first-name"> </div>

  <div class="button-div"> </div>
</body>

注意：这将非常复杂

【讨论】：

document.createElement(tagName);
现在可以了吗：乔纳森
感谢 Aman！.. 虽然这在很大程度上满足了我的要求，但我仍然相信选择像“Polymer”这样的框架是明智之举。感谢您的宝贵时间！