Javascript 试图让eventHandler在其自己的类中访问另一个类'；s法

我试图理解如何使用类按其用途划分函数

我正在使用类构建一个待办事项列表应用程序。（我知道这可能不是类的理想用例，但仍然想习惯使用类）

我创建了一个CreateTodoList类，其中包含用于todoList和todos存储数据的构造函数

所以addTodo基本上将从eventHandler接收到的文本获取到todos（数组），并使用addtoList（文本）创建一个DOM元素

在CreateTodoList类之外，我创建了另一个名为“Events”的类，它将在其中处理来自用户输入的所有事件。所有这些都将调用addTodo函数来传递用户输入值

我尝试了很多方法来实现这一点，但似乎类内的任何东西都无法识别外部变量，也无法通过使用CreateTodoList.eventListener引用其他类方法

请您指出下面的代码有什么问题，并可能解释它是如何工作的？ 提前谢谢

const add = document.querySelector('#btn_add');
let addInput = document.querySelector('#add');
const form = document.querySelector('#form');
class CreateTodoList {
  constructor(list) {
    this.todoList = list;
    this.todos = [];
  }


  addtoList(text) {
    let checkboxEl = document.createElement('span');
    checkboxEl.classList.add('round');
    let checkboxEl2 = document.createElement('input');
    checkboxEl2.id = 'checkbox';
    checkboxEl2.type = 'checkbox';
    let checkboxEl3 = document.createElement('label');
    checkboxEl3.htmlFor = 'checkbox';
    checkboxEl.appendChild(checkboxEl2);
    checkboxEl.appendChild(checkboxEl3);

    let todoTextEl = document.createElement('input');
    todoTextEl.value = text;
    todoTextEl.disabled = true;
    todoTextEl.classList.add('edit_input');
    todoTextEl.id = 'edit_input';
    todoTextEl.type = 'text';
    todoTextEl.name = 'edit_input';
    let todoTextEl2 = document.createElement('label');
    todoTextEl2.htmlFor = 'edit_input';

    let editEl = document.createElement('i');
    editEl.classList.add('far');
    editEl.classList.add('fa-edit');

    let deleteEl = document.createElement('i');
    deleteEl.classList.add('far');
    deleteEl.classList.add('fa-trash-alt');

    let dateEl = document.createElement('small');
    dateEl.textContent = timeago.format(new Date());

    let liEl = document.createElement('li');
    liEl.appendChild(checkboxEl);
    liEl.appendChild(todoTextEl);
    liEl.appendChild(todoTextEl2);
    liEl.appendChild(editEl);
    liEl.appendChild(deleteEl);
    liEl.appendChild(dateEl);

    let list = document.querySelector('ul');
    list.appendChild(li);

    return liEl;
  }

  addTodo(text) {
    this.todos.push(text);
    this.todoList.appendChild(CreateTodoList.addtoList(text));
  }


class Events{
  add.eventHandler('click', (e) => {
  e.preventDefault();
  let userText = document.querySelector('#userInput').value;
  CreateTodoList.addTodo(userText);
});
}

---

有两种方法可以解决这个问题。第一个方法是实例化CreateTodoList类。类是与处理数据的函数混合的数据。因为类是数据，所以您需要为它们的数据创建一个变量，否则就代码而言它们不存在。这样做会创建类的实例，因此名为实例化：

class Events{
  add_events(){
    add.eventHandler('click', (e) => {
      e.preventDefault();
      let userText = document.querySelector('#userInput').value;

      // Creating an instance
      let todoList = CreateTodoList();
      todoList.addTodo(userText);
    });
  }
}

如果您想使用类作为名称空间来组织函数，就像您在示例代码中尝试做的那样，那么您需要使用第二种方法，即使用“static”关键字

class CreateTodoList{

  // defining addTodo as static
  static function addTodo(text){
    // adding todo list
  }
}

这告诉类您没有试图操纵它的数据。然后可以直接从类名调用函数

class Events{
  add.eventHandler('click', (e) => {
    e.preventDefault();
    let userText = document.querySelector('#userInput').value;

    // calling the static function from the class name
    CreateTodoList.addTodo(userText);
  });
}

---

请在此处查看有关static关键字的更多信息：

有两种方法可以解决此问题。第一个方法是实例化CreateTodoList类。类是与处理数据的函数混合的数据。因为类是数据，所以您需要为它们的数据创建一个变量，否则就代码而言它们不存在。这样做会创建类的实例，因此名为实例化：

class Events{
  add_events(){
    add.eventHandler('click', (e) => {
      e.preventDefault();
      let userText = document.querySelector('#userInput').value;

      // Creating an instance
      let todoList = CreateTodoList();
      todoList.addTodo(userText);
    });
  }
}

如果您想使用类作为名称空间来组织函数，就像您在示例代码中尝试做的那样，那么您需要使用第二种方法，即使用“static”关键字

class CreateTodoList{

  // defining addTodo as static
  static function addTodo(text){
    // adding todo list
  }
}

这告诉类您没有试图操纵它的数据。然后可以直接从类名调用函数

class Events{
  add.eventHandler('click', (e) => {
    e.preventDefault();
    let userText = document.querySelector('#userInput').value;

    // calling the static function from the class name
    CreateTodoList.addTodo(userText);
  });
}

请在此处查看有关静态关键字的更多信息：