我如何从这个单一的班级创建一个单独的班级？

Question

我被要求这样做：构建2个类，一个用于程序性更改和UI更改，并将更改作为类内的方法进行处理。简而言之，侦听器回调现在应该调用对象方法，而不是定义单独的方法。.我已经成功地为其创建了一个类并调用了函数，但是我不知道如何将该类分为两个？我相信我已经完成了大部分工作..只需要一点帮助..即使是一个例子也可以..在此先感谢

onRow

import axios from "axios";
class classno1
{
   getTodos =()=>{
    return axios.get("https://reqres.in/api/users?page=1?_linit=4"       
    ).then(res=>{this.showOutputGet(res);
      }).catch(err=>console.log(err));
  };
   addTodos=()=>{
    axios.post("https://reqres.in/api/users/todo",{title: "cosmic' ToDo",status:"completed"}      
    ).then(res=>{this.showOutputPost(res);}).catch(err=>console.log(err));
  };

   updateTodo=()=> {
    axios.put("https://reqres.in/api/users/2",{name: "Shivam",job:"assasination"}      
    ).then(res=>{this.showOutputPut(res);}).catch(err=>console.log(err));
  };
  
   removeTodo=()=> {
    axios.delete("https://reqres.in/api/users/1"      
    ).then(res=>{this.showOutputDel(res);}).catch(err=>console.log(err));
  };
  
 showOutputGet=(res)=>{
    $("#res").html(`
    <div class="card card-body mb-4 bg-primary text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header">
        Headers
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header bg-primary text-white">
        Data
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header bg-primary text-white">
        Config
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputPost=(res)=>{
    $("#res").html(`
    <div class="card card-body mb-4 bg-info text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info">
        Headers
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info text-white">
        Data
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info text-white">
        Config
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputPut=(res)=> {
    $("#res").html(`
    <div class="card card-body mb-4 bg-warning text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning">
        Headers
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning text-white">
        Data
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning text-white">
        Config
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputDel=(res)=> {
    $("#res").html(`
    <div class="card card-body mb-4 bg-danger text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger">
        Headers
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger text-white">
        Data
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger text-white">
        Config
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
}
let obj=new classno1();
  $("#get").click(obj.getTodos);
$("#post").click(obj.addTodos);
 $("#update").click(obj.updateTodo);
 $("#delete").click(obj.removeTodo);
 

Answer 1

/* eslint-disable no-undef */
import axios from "axios";
class ProgrammingLogic
{
   getTodos =()=>{
    return axios.get("https://reqres.in/api/users?page=1?_linit=4"       
    ).then(res=>{this.showOutputGet(res);
      }).catch(err=>console.log(err));
  };
   addTodos=()=>{
    axios.post("https://reqres.in/api/users/todo",{title: "shivams' ToDo",status:"completed"}      
    ).then(res=>{this.showOutputPost(res);}).catch(err=>console.log(err));
  };

   updateTodo=()=> {
    axios.put("https://reqres.in/api/users/2",{name: "Shivam",job:"assasination"}      
    ).then(res=>{this.showOutputPut(res);}).catch(err=>console.log(err));
  };
  
   removeTodo=()=> {
    axios.delete("https://reqres.in/api/users/1"      
    ).then(res=>{this.showOutputDel(res);}).catch(err=>console.log(err));
  };
 
}
class UI extends ProgrammingLogic
{
 
  showOutputGet=(res)=>{
    $("#res").html(`
    <div class="card card-body mb-4 bg-primary text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header">
        Headers
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header bg-primary text-white">
        Data
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-primary text-white">
      <div class="card-header bg-primary text-white">
        Config
      </div>
      <div class="card-body bg-primary text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputPost=(res)=>{
    $("#res").html(`
    <div class="card card-body mb-4 bg-info text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info">
        Headers
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info text-white">
        Data
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-info text-white">
      <div class="card-header bg-info text-white">
        Config
      </div>
      <div class="card-body bg-info text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputPut=(res)=> {
    $("#res").html(`
    <div class="card card-body mb-4 bg-warning text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning">
        Headers
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning text-white">
        Data
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-warning text-white">
      <div class="card-header bg-warning text-white">
        Config
      </div>
      <div class="card-body bg-warning text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
   showOutputDel=(res)=> {
    $("#res").html(`
    <div class="card card-body mb-4 bg-danger text-white">
      <h5>Status: ${res.status}</h5>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger">
        Headers
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.headers, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger text-white">
        Data
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.data, null, 2)}</pre>
      </div>
    </div>
    <div class="card mt-3 bg-danger text-white">
      <div class="card-header bg-danger text-white">
        Config
      </div>
      <div class="card-body bg-danger text-white">
        <pre class="text-white">${JSON.stringify(res.config, null, 2)}</pre>
      </div>
    </div>
  `);
  };
}
let obj=new UI();
  $("#get").click(obj.getTodos);
$("#post").click(obj.addTodos);
 $("#update").click(obj.updateTodo);
 $("#delete").click(obj.removeTodo);