表单 – 如何通过扩展基类表单来动态地使用ES6创建此表单？

概述我想在JS中创建表单,就像它们继承一样…例如,我可以使用for循环轻松地整天添加表单元素,但我宁愿让自己自由地插入不同的元素中间.换句话说,我希望它是“模块化的”,并且有一个基类可以生成像登录屏幕一样简单的东西,但是然后扩展它以包括文本字段之间的下拉列表.关于如何实现这一点的任何想法？最好是ES6类和导入/导出,没有webpack废话. 理想情况下,我有一个名为BasicForm的类,并且Regi 我想在Js中创建表单,就像它们继承一样…例如,我可以使用for循环轻松地整天添加表单元素,但我宁愿让自己自由地插入不同的元素中间.换句话说,我希望它是“模块化的”,并且有一个基类可以生成像登录屏幕一样简单的东西,但是然后扩展它以包括文本字段之间的下拉列表.关于如何实现这一点的任何想法？最好是ES6类和导入/导出,没有webpack废话.
理想情况下,我有一个名为BasicForm的类,并且RegistrationForm扩展了BasicForm.这样,我可以简单地将字段名称存储在数组中,如果我需要进行更改而不是更改所有内容,则可以更改该文件一次.这是现有的代码….请注意,只有选择的用户角色选项是“admin”….才会显示“发票”.这使得我想要理解这一点非常困难.有没有办法通过引导程序和自定义类在程序上生成使用ES6类的 Javascript,这样可以重用模块来创建有或没有下拉列表的表单？

HTML：

<div class= "row">  <!--inherits background from .body-->    <div >     <!--spacing divs inherit background from .body-->        &nbsp;    </div>    <div >  <!--Actual Box containing fIElds and prompts and buttons changes to new background-->        <h2 >Registration</h2>        <form name="new_user_form">            Email Address<input type="text"  name="email" value="" placeholder="Email Address"><br>            Re-Enter Email Address<input type="text"  autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>            First name<input type="text"  autocomplete="given-name" name="firstname" value="" placeholder="First name"><br>            Last name<input type="text"  autocomplete="family-name" name="lastname" value="" placeholder="Last name"><br>            Company name<a href="#"  data-toggle="tooltip" title="Choose your company name.  If you do not see it here,please contact ACSI to become an official distributor."><img src="images/help-icon.png"></a>            <select  name="company">                <option value="noSelect">Select</option>                <option value="company2">Company 2</option>            </select>            Mobile Phone <a href="#"  data-toggle="tooltip" title="This is used for password recovery only."><img src="images/help-icon.png"></a>            <input type="text"  autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>            Portal User Role <a href="#"  data-toggle="tooltip" title="Portal admins are the administrators for your company."><img src="images/help-icon.png"></a>            <select  name="role" ID="user-role">                <option value="user">User</option>                <option value="admin">admin</option>            </select>            <div ID="invoices">                Enter two recent invoice totals in USD($)<br>                Invoice 1<input type="text"  name="invoice1" value="" placeholder="0.00">                Invoice 2<input type="text"  name="invoice2" value="" placeholder="0.00">            </div>             <button  ID="submit">submit</button>        </form>    </div>    <div >     <!--spacing divs-->        &nbsp;    </div></div>

解决方法 我建议使用Web Components.它们是原生的,很快就会在Chrome中支持其他浏览器,您可以将polyfill用于其他浏览器.使用以下代码：

class WordCount extends HTMLParagraphElement {  constructor() {    // Always call super first in constructor    super();    //put code here  }}

使用元素功能在super()之后插入在https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements处找到的代码

定义一个新元素：`customElements.define(‘popup-info’,PopUpInfo);

然后你可以像这样使用它：

<popup-info img="img/alt.png" text="Your card valIDation code (CVC)is an extra security feature — it is the last 3 or 4 numbers on theback of your card.">

从上面的链接中获取的示例,在Mozilla的Dev Site中.

总结

以上是内存溢出为你收集整理的表单 – 如何通过扩展基类表单来动态地使用ES6创建此表单？全部内容，希望文章能够帮你解决表单 – 如何通过扩展基类表单来动态地使用ES6创建此表单？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。