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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

<popup-info img="img/alt.png" text="Your card validation code (CVC)\nis an extra security feature \xe2\x80\x94 it is the last 3 or 4 numbers on the\nback of your card.">\n

\n\n

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

\n