Javascript 使用类语法动态生成具有多种类型的html按钮

我目前正在使用javascript在DOM中生成一些按钮

按钮属性来自json字符串。目前有四种按钮

长按事件触发时，恒温按钮（THERM）、简单按钮（SIMP）PWM按钮（PWM）和带滑块的快门（SHUT）

我现在采用的方法是为所有按钮创建类，当

Generate\u buttons

函数在json字符串中迭代时，当for循环位于右按钮ID中时，我生成四种按钮，如下所示：

/* button classes */
    class Simple {
        constructor(nth,name,id,classname) {
          this.NTH      = nth;
          this.NAME     = name;
          this.ID       = id;
          this.CLASS    = classname;
        }
        assemble(){
            var URL = "/UserBtn";
            var Param = "nth=" + this.NTH;
            var $Col_for_Btns = $("<div>", { class: "col s2" });
            var $Click_for_Btns = $("<a>", { id: this.ID, name: this.NAME, class: "waves-effect waves-light btn", onclick: 'httpGetAsync(\'' + URL + '\', Callback, \'' + Param + '\' );' });
            var $Icon_for_Btns = $("<i>", { class: "material-icons", text: "wb_incandescent" });
            $($Click_for_Btns).append($Icon_for_Btns);
            $($Col_for_Btns).append($Click_for_Btns);
            SimpIDS.push(this.NTH);
            return $Col_for_Btns;
        }
      }

    class PWM{
        constructor(nth,name,id,amper) {
            this.NTH      = nth;
            this.NAME     = name;
            this.ID       = id;
            this.AMPER    = amper;
          }
        assemble(){
            var URL = "/UserBtnPWM";
            var Param = "nth=" + this.NTH;
            Param += "&percent=" + this.AMPER;
            var $Col_for_Btns = $("<div>", { class: "col s2" });
            var $Click_for_Btns = $("<a>", { id: this.ID, name: this.NAME, class: "waves-effect waves-light btn scale-transition", onclick: 'httpGetAsync(\'' + URL + '\', Callback, \'' + Param + '\' );' });
            var $Icon_for_Btns = $("<i>", { class: "material-icons", text: "equalizer" });

            var pwmid = this.ID + "scaled";
            var $PWMSlider = $("<div>", { style: "display:none", class: "PWMredonyslider scale-transition scale-out", name: this.NAME, id: pwmid, nth: this.NTH, maxamper: this.AMPER })

            $($Click_for_Btns).append($Icon_for_Btns);
            $($Col_for_Btns).append($Click_for_Btns);
            $($Col_for_Btns).append($PWMSlider);
            PWMIDS.push(this.NTH);
            LongPressIDs.push(this.ID);
            return $Col_for_Btns;
        }
    }

    class SHUT{
        constructor(nth,name,id,classname) {
            this.NTH      = nth;
            this.NAME     = name;
            this.ID       = id;
            this.CLASS    = classname;
        }
        assemble(){
            var $RedonyHandler = $("<div>", { class: "redonyslider " + this.CLASS, name: this.NAME, idke: this.ID, nth:this.NTH });
            ShutIDS.push(this.NTH);
            return $RedonyHandler;
        }
    }

    class THERM{
        constructor(nth,name,id,roomname) {
            this.NTH      = nth;
            this.NAME     = name;
            this.ID       = id;
            this.ROOM     = roomname;
            this.col;
        }
        assemble(){
            var $Col_for_Btns = $("<div>", { class: "col s2" });
            var $Click_for_Btns = $("<a>", {
                id: this.ID, name: this.NAME, class: "waves-effect waves-light btn",
                onclick: 'ThermosModalOpen(\'' + this.ROOM + '\')'
            });

            var $Icon_for_Btns = $("<i>", { class: "material-icons", text: "ac_unit" });
            $($Click_for_Btns).append($Icon_for_Btns);
            $($Col_for_Btns).append($Click_for_Btns);
            ThermIDS.push(this.NTH);
            this.col = $Col_for_Btns;
            return $Col_for_Btns;
        }
        get Button(){
            return this.col;
        }
    }
/* button classes */

function Generate_Buttons(Data) {
    console.log("Teljes Adat: ",Data);
    for (var i = 0; i < Data.length; i++) {
        var HasShutter = false;
        var RedonyID = "";
        var RoomName = Data[i].RoomName.replace(/\s+/g, '');
        if (ExistingGroups.includes(RoomName)) {
            var Indexi = ExistingGroups.indexOf(RoomName);
            ExistingGroups.splice(Indexi, 1);
            $("#WholeRoom" + RoomName).remove();
        }
        ExistingGroups.push(RoomName);
        var $GroupLI = $("<li>", { id: "WholeRoom" + RoomName });
        var $GroupHeader = $("<div>", { id: "GroupHead" + RoomName, class: "collapsible-header transparent teal-text text-darken-1" });
        var $GroupHeaderIcon = $("<i>", { class: "material-icons left", text: Data[i].icon });
        var $GroupBody = $("<div>", { class: "collapsible-body", id: "GBody" + RoomName });
        var $BtnRow = $("<div>", { class: "row", });
        var $BtnFirstCol = $("<div>", { id: "GroupID" + RoomName, class: "col s12" });
        $($BtnRow).append($BtnFirstCol);
        $($GroupHeader).append($GroupHeaderIcon);
        $($GroupBody).append($BtnRow);

        $($GroupLI).append($GroupHeader);
        $($GroupLI).append($GroupBody);
        $("#homecontrols").prepend($GroupLI);
        $("#GroupHead" + RoomName).append(Data[i].RoomName);

        if ("BTNS" in Data[i]) {
            for (var k = 0; k < Data[i].BTNS.length; k++) {
                
                if (Data[i].BTNS[k].BTNID.includes("SIMP")) {
                    

                    SimpButton = new Simple(parseInt(Data[i].BTNS[k].NTH),Data[i].BTNS[k].BtnName,Data[i].BTNS[k].BTNID);
                    //console.log(SimpButton.assemble());
                    $("#GroupID" + RoomName).append(SimpButton.assemble());
                    } else if (Data[i].BTNS[k].BTNID.includes("PWM")) {
                    PWMButton = new PWM(Data[i].BTNS[k].NTH,Data[i].BTNS[k].BtnName,Data[i].BTNS[k].BTNID,Data[i].BTNS[k].MaxAmper);
                    $("#GroupID" + RoomName).append(PWMButton.assemble());
                   
                } else if (Data[i].BTNS[k].BTNID.includes("SHUT")) {
                    var ColorClass = "NotConfigured";
                    if("PercentBefore" in Data[i].BTNS[k]){
                        ColorClass = "Configured";
                    }
                    SHUTButton = new SHUT(Data[i].BTNS[k].NTH,Data[i].BTNS[k].BtnName,Data[i].BTNS[k].BTNID,ColorClass);
                    if (!HasShutter) {
                        HasShutter = true; RedonyID = "Redony" + RoomName;
                        $("#GBody" + RoomName).append(MakeShutter(RedonyID));
                    }
                    $("#" + RedonyID).append(SHUTButton.assemble());
                } else if (Data[i].BTNS[k].BTNID.includes("THERM")) {
                    THERMButton = new THERM(Data[i].BTNS[k].NTH,Data[i].BTNS[k].ThermBtnName,Data[i].BTNS[k].BTNID,RoomName);
                    $("#GroupID" + RoomName).append(THERMButton.assemble());
                }
            }
        }
    }
}

在这个类中，我会管理四种按钮。我想这样做的主要原因是，我想从脚本中的任何地方的类中获取组装好的按钮col，并希望它更有条理。我不知道如何在课堂上处理这些事情

big Button类将有一个CreateButton函数，其中包含所有按钮类型的自定义参数和一个get方法？使组装好的jquery能够将其附加到dom中。如果我能够从创建的大类中获得各个按钮的ID和名称，那就太好了。现在所有的按钮都在一个“房间”里

我该怎么做？可能吗？

class Buttons{
        constructor(kind){
            this.KIND = kind;
            this.PWM;
            this.SHUT;
            this.SIMP;
            this.THERM;
        }

        CreateButton(KIND){
            //Create x kind of button assembled html? // therm or simple or shut or pwm
            return CreatedHTML;
        }

        get Type_Button(kind){
            return requested_button_later_on_Program
        }
    }
    var Buttons = new Buttons(properties);
    $("#SomeRoomID").append( Buttons.Type_Button("SIMPLE") );