修改 function 內的 DOM 元素

Question

我有這個任務。 使用有關工廠方法模式的知識，實現允許創建(create(type) method)兩種類型的程序的 SectionCreator 工廠：

• 標准。標准類型創建使用模型實現的程序。
• 高級。高級類型的功能相同，但其標題文本是加入我們的高級計划，提交按鈕文本是訂閱高級計划。 創建的程序應該有 remove() 方法從頁面中刪除創建的部分。

我創建了一個join-us-section.js ，其中有以下代碼：

function addSection() {

    function elCreating(elName, htmlEl, elClass, elID) {
        elName = document.createElement(htmlEl);
        elName.className = elClass;
        elName.id = elID;

        return elName;
    }

    function getElbyID(elName, searchedId) {
        elName = document.getElementById(searchedId);

        return elName;
    }

    function setAttributes(elem) {
        for (var i = 1; i < arguments.length; i += 2) {
            elem.setAttribute(arguments[i], arguments[i + 1]);
        }
    }

    let sectionFour = elCreating("sectionFour", "section", "app-section app-section--image-program", "fourth-section");
    let sectionParent = getElbyID("sectionParent", "third-section");
    let parentSection = sectionParent.parentNode;
    parentSection.insertBefore(sectionFour, sectionParent.nextSibling);

    let heading2 = elCreating("heading2", "h2", "program-title");
    let heading2Text = document.createTextNode("Join Our Program");
    heading2.append(heading2Text);
    let parent = getElbyID("parent", "fourth-section");

    let heading3 = elCreating("heading3", "h3", "program-subtitle");
    let heading3Text = document.createTextNode("Sed do eiusmod tempor incididunt");
    heading3.appendChild(heading3Text);
    let linebreak = elCreating("linebreak", "br");
    heading3.appendChild(linebreak);
    heading3Text = document.createTextNode("ut labore et dolore magna aliqua");
    heading3.appendChild(heading3Text);

    let submitFieldWrapper = elCreating("submitFieldWrapper", "form", "submitFieldWrapper");
    parent.append(heading2, heading3, submitFieldWrapper);

    let emailForm = elCreating("emailForm", "div", "form-wrapper");

    let inputForm = elCreating("inputForm", "input", "form-input", "submit-info");
    setAttributes(inputForm,
        "type", "text",
        "placeholder", "Email");
    emailForm.appendChild(inputForm);

    document.querySelector("form").addEventListener("submit", function (e) {
        e.preventDefault();
        console.log(inputForm.value);
    });

    let submitForm = elCreating("submitForm", "input", "app-section__button submit-btn");
    setAttributes(submitForm,
        "type", "submit",
        "value", "Subscribe");
    submitFieldWrapper.append(emailForm, submitForm);

}
export default addSection;

main.js我有這個：

import addSection from "./join-us-section.js";

window.onload = addSection;

var SectionCreatorFactory = function () {
    this.createType = function (type) {
        var sectionType;
        if (type === "standard") {
            addSection();
            removeElement("fourth-section");
        } else if (type === "advanced") {
            let sectionFour = elCreating("sectionFour", "section", "app-section app-section--image-program", "fifth-section");
            let sectionParent2 = getElbyID("sectionParent2", "third-section");
            let parentSection = sectionParent.parentNode;
            parentSection.insertBefore(sectionFour, sectionParent.nextSibling);

            let heading2 = elCreating("heading2", "h2", "program-title");
            let heading2Text = document.createTextNode("Join Our Advanced Program");
            heading2.append(heading2Text);
            let parent = getElbyID("parent", "fifth-section");

            let heading3 = elCreating("heading3", "h3", "program-subtitle");
            let heading3Text = document.createTextNode("Sed do eiusmod tempor incididunt");
            heading3.appendChild(heading3Text);
            let linebreak = elCreating("linebreak", "br");
            heading3.appendChild(linebreak);
            heading3Text = document.createTextNode("ut labore et dolore magna aliqua");
            heading3.appendChild(heading3Text);

            let submitFieldWrapper = elCreating("submitFieldWrapper", "form", "submitFieldWrapper");
            parent.append(heading2, heading3, submitFieldWrapper);

            let emailForm = elCreating("emailForm", "div", "form-wrapper");

            let inputForm = elCreating("inputForm", "input", "form-input", "submit-info");
            setAttributes(inputForm,
                "type", "text",
                "placeholder", "Email");
            emailForm.appendChild(inputForm);

            document.querySelector("form").addEventListener("submit", function (e) {
                e.preventDefault();
                console.log(inputForm.value);
            });

            let submitForm = elCreating("submitForm", "input", "app-section__button submit-btn");
            setAttributes(submitForm,
                "type", "submit",
                "value", "Subscribe to Advanced Program");
            submitFieldWrapper.append(emailForm, submitForm);
            removeElement("fourth-section");
        }
        return sectionType;
    }
}
function removeElement(elementId) {
    var element = document.getElementById(elementId);
    element.remove();
}

var factory = new SectionCreatorFactory();
factory.createType("standard");

你看，對於高級類型，我只是從 join-us-section 復制粘貼代碼來創建新部分。 但據我所知，不建議復制代碼。 首先，這個復制粘貼不起作用，它創建了三個與function AddSection具有相同特征的部分。 我不知道如何使它變小。 我試圖做另一個 function，修改元素，聲明全局變量，但沒有任何效果。 也許我做錯了方法。 我在整個互聯網上搜索了任何文件，但我沒有找到任何適合我任務的東西。

Answer 1

我會通過問一個問題來回答你，讓你思考。 你能用 inheritance 嗎？ 條件渲染呢？