forms - 如何通过扩展基类表单使用 ES6 动态制作此表单？

Question

我想在 JS 中制作类似于继承的表单......例如，我可以使用 for 循环轻松地整天附加表单元素，但我宁愿让自己自由插入不同的元素中间。换句话说，我希望它是“模块化的”，并且有一个基类可以生成简单的东西，比如登录屏幕，然后将其扩展为在文本字段之间包含下拉菜单。关于如何实现这一点的任何想法？最好使用 ES6 类和导入/导出，并且没有 webpack 废话。
理想情况下，我会有一个名为 BasicForm 的类(class)并拥有 RegistrationForm extends BasicForm .这样，如果我需要进行更改而不是更改所有内容，我可以简单地将字段名称存储在一个数组中并更改该文件一次。这是现有代码....请注意，“发票”仅在选择的用户角色选项为“管理员”时才会显示....这使我很难理解这一切的想法。有没有什么方法可以通过 Bootstrap 和自定义类从使用 ES6 类的 Javascript 程序生成，以便可以重用模块来创建带有或不带有下拉菜单的表单？

HTML:

<div class= "row">  <!--Inherits background from .body-->
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs inherit background from .body-->
        &nbsp;
    </div>
    <div class="form-box rounded col-12 col-xs col-sm-7 col-md-6 col-lg-4 col-xl-3">  <!--Actual box containing fields and prompts and buttons changes to new background-->
        <h2 class="portal-heading">Registration</h2>
        <form name="new_user_form">
            Email Address<input type="text" class="form-control register-field highlight-hover" name="email" value="" placeholder="Email Address"><br>
            Re-Enter Email Address<input type="text" class="form-control register-field highlight-hover" autocomplete="off" name="email" value="" placeholder="Re-enter Email Address"><br>
            First Name<input type="text" class="form-control register-field highlight-hover" autocomplete="given-name" name="firstname" value="" placeholder="First Name"><br>
            Last Name<input type="text" class="form-control register-field highlight-hover" autocomplete="family-name" name="lastname" value="" placeholder="Last Name"><br>
            Company Name<a href="#" class="help-icon" 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 class="form-control register-field highlight-hover" name="company">
                <option value="noSelect">Select</option>
                <option value="company2">Company 2</option>
            </select>
            Mobile Phone <a href="#" class="help-icon" data-toggle="tooltip" title="This is used for password recovery only."><img src="images/help-icon.png"></a>
            <input type="text" class="form-control register-field highlight-hover" autocomplete="tel" name="mobile" value="" placeholder="0005559999"><br>
            Portal User Role <a href="#" class="help-icon" data-toggle="tooltip" title="Portal admins are the administrators for your company."><img src="images/help-icon.png"></a>
            <select class="form-control register-field highlight-hover" 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" class="form-control register-field highlight-hover" name="invoice1" value="" placeholder="0.00">
                Invoice 2<input type="text" class="form-control register-field highlight-hover" name="invoice2" value="" placeholder="0.00">
            </div> 
            <button class="btn btn-block highlight-hover" id="submit">Submit</button>
        </form>
    </div>
    <div class="col-hidden col-sm col-md col-lg col-xl">     <!--spacing divs-->
        &nbsp;
    </div>
</div>

Answer 1

我建议使用 Web 组件。它们是原生的，即将在 Chrome 中支持其他浏览器，并且您可以为其他浏览器使用 polyfill。使用以下代码:

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

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

定义一个新元素:`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 the
back of your card.">

示例取自 Mozilla 开发站点中的上述链接。