Блог

Я пытаюсь понять, как использовать классы для разделения моих функций по их назначению.

Я создаю приложение со списком задач, используя классы. (Я знаю, что это может быть не идеальным вариантом использования class, но все же хотел привыкнуть к использованию class)

Я создал класс CreateTodoList с конструктором для ToDoList и todos для хранения данных.

таким образом, addTodo в основном переводит текст, полученный из EventHandler, в todos (массив) и создает элемент DOM, используя addtoList(текст).

Вне класса CreateTodoList я создал другой класс под названием «События», где он будет обрабатывать все события из пользовательских вводов. все, что для этого потребуется, это вызвать функцию 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. Классы — это данные, смешанные с функциями, которые манипулируют этими данными. Поскольку классы являются данными, вам необходимо создать переменную для их данных, иначе они не существуют с точки зрения кода. При этом создается экземпляр класса, отсюда и название instantiation:

 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 смотрите здесь:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static