Użycie tablicy w innej klasie

Question

Witam, ostatnio poczytałem trochę o programowaniu OOP w javascript, dotąd pisałem funkcyjnie, chciałem zrobić toDo listę z podziałem na klasy: Add i Remove. Klasę Add udało mi się zrobić, natomiast mam problem z klasą Remove. Nie wiem jak przekazać do funkcji removeTask tablice z klasy Add tak by usunąć dany index tablicy, drugie pytanie, czy w konstruktorze właściwie zdefiniowałem Listenera do usunięcia zadania z widoku przeglądarki przez klikniecie przycisku "Delete Task", czy raczej należy zrobić to w inny sposób? Poniżej kod:

https://jsfiddle.net/mctwu8g9/

Answer 1

Dość dziwny podział IMO. Nie lepiej byłoby zrobić jedną klasę ToDoList? Wówczas wszystko miałbyś w jednym miejscu i całość byłaby o wiele prostsza do zakodzenia.

Dodatkowo ja bym tutaj widział inną okazję na podział: klasa, która byłaby odpowiedzialna za operacje na tablicy zadań, oraz klasa, która odpowiadałaby za jej wyświetlanie na stronie.

Natomiast bez zmiany obecnego podziału najprościej byłoby dorzucać index tablicy do elementu HTML jako atrybut i pobierać go przy kliku, a następnie na jego podstawie usuwać zadanie z klasy Add. Natomiast dostęp do klasy Add możesz zrobić przy pomocy przekazania tej klasy jako argumentu do konstruktora Remove. Niemniej to już pokazuje, że coś jest nie tak z tym podziałem, bo trzeba się dość mocno napocić, żeby złączyć te klasy jakoś sensownie.

Comments

Dziękuje za odpowiedź, pewnie chodziło Ci o button usuwajacy zadanie, ja miałem na myśli button, który zatwierdza inputa i wrzuca do listy. Co do event delegation wystarczy w funkcji w parametrze przekazać event i sprawdzenie np: 

event.target.tagName === "BUTTON"

Niestety nadal mam błąd jak zastosuje się do Twojej rady:

class Renderer {
  constructor(input) {
    this.input = input;
    this.task = this.input.querySelector("input");
    this.btn = this.input.querySelector("button");
    this.ul = this.input.querySelector(".tasks");
  }
  // tutaj chciałem wykorzystać zmienna do addEventListenera
  this.btn.addEventListener(){

  }

podkreśla mi this, a jeśli nawet zamiast this użyje instacji klasy render.btn też nie idzie :/

---

@jasper93, może spróbuj np. w taki sposób on-line.

---

Zrobiłem trochę po swojemu i w miarę działa, mam jeszcze pytanie, dlaczego dla poniższej metody używamy binda:

this.renderer.onRemoveTaskCallback = this.removeTask.bind(this);

a dla render(task)  juz nie?

---

AFAIK, w render(task) użyłem funkcji strzałkowej, która automatycznie zachowuje kontekst this z miejsca, w którym została zdefiniowana. W tym przypadku, kontekst this wewnątrz funkcji strzałkowej nadal odnosi się do obiektu ToDoList, dzięki czemu możemy poprawnie wywołać this.onRemoveTaskCallback(index) i przekazać właściwe indeksy zdarzeń.

 

sprawdź

//button.onclick = () => this.onRemoveTaskCallback(index);
button.onclick = this.onRemoveTaskCallback.bind(this, index);

 

---

Nie, to tak nie działa. Funkcja strzałkowa wewnątrz ToDoListDOMRenderer nic nie zmienia. Zmienia jedynie to, że this wewnątrz jest ustawione na instancję ToDoListDOMRenderer, nie na window → https://jsfiddle.net/Comandeer/2s36hzbf/

Zamiana tej funkcji strzałkowej na bind nie ma absolutnie żadnego sensu, bo nie przypiszesz w ten sposób nowego this – ten został przypisany przez bind wewnątrz ToDoList. Wprowadzasz w taki sposób jedynie kod tworzący błędne przekonanie, że this jest zmieniane:

function method() {
	return this;
}

const obj1 = {};
const obj2 = {};

const obj1Method = method.bind( obj1 );
const obj2Method = obj1Method.bind( obj2 );

console.log( obj1Method() === obj1 ); // true
console.log( obj2Method() === obj2 ); // false
console.log( obj2Method() === obj1 ); // true

Natomiast bind jest wykorzystywane wewnątrz ToDoList, żeby po wywołaniu wewnątrz ToDoListDOMRenderer this wskazywało na poprawny obiekt – inaczej się wywoła w kontekście renderera. To wynika z faktu, że domyślnie w JS kontekstem jest obiekt, który jest po lewej stronie nazwy metody:

class Test1 {
	method() {
		console.log( this.constructor.name );
	}
}

class Test2 {
	method;
}

const test1 = new Test1();
const test2 = new Test2();

test2.method = test1.method;

test1.method(); // Test1
test2.method(); // Test2

test2.method = test1.method.bind( test1 );

test2.method(); // Test1

Bez tego bind wywołanie ToDoListDOMRenderer#onRemoveTaskCallback() odpaliłoby się w kontekście renderera, a my chcemy tę metodę zawsze odpalać w kontekście ToDoList.