如何将Javascript函数重构为Javascript类方法？

我已经创建了一个Javascript SPA，允许用户创建一个阅读日志，在其中添加流派，然后添加他们在该流派中阅读的书籍。现在，它有简单的JS类用于类型和书籍，然后是普通的JS函数用于添加、显示和编辑这些项目

例如：

    class Genre {
    constructor(name) {
        this.name = name
    };
}

function listGenres() {
    resetFormArea()
    document.getElementById("genreSection").innerHTML = ""
    let genreSection = document.getElementById("genreSection") 
    fetch(BASE_URL + "/genres")
    .then(resp => resp.json())
    .then(genres => {
        genres.sort()

    genreSection.innerHTML += genres.map(genre => `
        <div class="genreItem">
        <a href="#" data-name="${genre.name}" data-id="${genre.id}">${genre.name}</a><br><br>
        <button data-name="${genre.name}" class="addBook" data-id="${genre.id}">Add Book</button>
        <button data-id="${genre.id}" class="editGenre" onclick="editGenre(${genre.id})"; return false;>Edit Genre Name</button>
        <button data-id="${genre.id}" class="deleteGenre" onclick="deleteGenre(${genre.id})"; return false;>Delete Genre</button>
        </div>
    `).join('')

    let newBook = document.querySelectorAll("button.addBook")
    newBook.forEach(addBookButton => {
        addBookButton.addEventListener("click", (e) => {
            addBook(e)
            e.preventDefault()
        })
    })

    let booksByGenre = document.querySelectorAll("a")
    booksByGenre.forEach(genre => {
        genre.addEventListener("click", (e) => {
            e.preventDefault()
            genreBooks(e.currentTarget.dataset.id)
        })
    })
    })
}

function addGenre() {
    let newGenre = new Genre(document.getElementById("Genre Name").value)

    let genreSection = document.getElementById("genreSection")
    fetch(BASE_URL + "/genres", {
        method: "POST",
        body: JSON.stringify(newGenre),
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(resp => resp.json())
    .then(genre => {
        genreSection.innerHTML += `
        <div class="genreItem">
        <a href="#" data-name="${genre.name}" data-id="${genre.id}">${genre.name}</a><br><br>
        <button data-name="${genre.name}" class="addBook" data-id="${genre.id}">Add Book</button>
        <button data-id="${genre.id}" class="editGenre" onclick="editGenre(${genre.id})"; return false;>Edit Genre Name</button>
        <button data-id="${genre.id}" class="deleteGenre" onclick="deleteGenre(${genre.id})"; return false;>Delete Genre</button>
        </div>
        `
        let newBook = document.querySelectorAll("button.addBook")
        newBook.forEach(addBookButton => {
            addBookButton.addEventListener("click", (e) => {
                addBook(e)
                e.preventDefault()
            })
        })

        let booksByGenre = document.querySelectorAll("a")
        booksByGenre.forEach(genre => {
            genre.addEventListener("click", (e) => {
                e.preventDefault()
                genreBooks(e.currentTarget.dataset.id)
            })
        })
    
    })   
}

类体裁{
建造师（姓名）{
this.name=name
};
}
函数listGenes（）{
resetFormArea（）
document.getElementById（“GEN”）.innerHTML=“”
让GENECTION=document.getElementById（“GENECTION”）
获取（基本URL+“/genres”）
.then（resp=>resp.json（））
.然后（类型=>{
tyres.sort（）
generelection.innerHTML+=genres.map（genre=>`



添加书本
编辑流派名称
删除体裁
`).加入（“”）
让newBook=document.queryselectoral（“button.addBook”）
newBook.forEach（addBookButton=>{
addBookButton.addEventListener（“单击”，（e）=>{
地址簿（e）
e、 预防默认值（）
})
})
让booksByGenre=document.queryselectoral（“a”）
booksByGenre.forEach（流派=>{
genre.addEventListener（“单击”，（e）=>{
e、 预防默认值（）
genreBooks（e.currentTarget.dataset.id）
})
})
})
}
函数addgreen（）{
让newGenre=newGenre（document.getElementById（“Genre Name”）.value）
让GENECTION=document.getElementById（“GENECTION”）
获取（基本URL+“/genres”{
方法：“张贴”，
正文：JSON.stringify（newGenre），
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}
})
.then（resp=>resp.json（））
.然后（体裁=>{
genrestoration.innerHTML+=`



添加书本
编辑流派名称
删除体裁
`
让newBook=document.queryselectoral（“button.addBook”）
newBook.forEach（addBookButton=>{
addBookButton.addEventListener（“单击”，（e）=>{
地址簿（e）
e、 预防默认值（）
})
})
让booksByGenre=document.queryselectoral（“a”）
booksByGenre.forEach（流派=>{
genre.addEventListener（“单击”，（e）=>{
e、 预防默认值（）
genreBooks（e.currentTarget.dataset.id）
})
})
})   
}

第一个函数用于显示流派列表，第二个函数在提交“添加流派”表单时调用。到目前为止，我已经尝试过将它们作为静态类方法进行修改，但我还没能让它们很好地工作，如果有的话。例如，新的类型不会出现，甚至不会保存在数据库中。我已经玩了相当多的代码，没有运气。我可能仍然需要为我的方法精简代码。 也许我只是不理解类方法应该是如何工作的（是的，我在这方面很新！）。任何帮助都将不胜感激