试图让 eventHandler 在它自己的类中访问另一个类的方法答案

【问题标题】：Trying to have eventHandler in its own class access to another class's method试图让 eventHandler 在它自己的类中访问另一个类的方法
【发布时间】：2020-08-30 02:03:06
【问题描述】：

我正在尝试了解如何使用类来按用途划分我的功能。

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

我用 todoList 和 todos 的构造函数创建了一个 CreateTodoList 类来存储数据。

所以 addTodo 基本上将从 eventHandler 接收到的文本带到 todos(array) 并使用 addtoList(text) 创建一个 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);
});
}

【问题讨论】：

标签： javascript class oop dom

【解决方案1】：

有两种方法可以解决这个问题。第一种方法是实例化 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);
    });
  }
}

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

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);
  });
}

在此处查看有关静态关键字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

【讨论】：